Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
@Mirzam thank you so much it was driving me nuts trying to figure out what that was if it wasn't the border lol. Much appreciated ❤️
🌸
🌺
🌸
GrapeJelly
Grape ~ she/her ~ PhD student ~ local time 07:30
Your local ground type enjoyer
on a journey to hatch ground type melans
Ground melans so far: 23
Current hunt: 
1/1 
0/1Credits
PFP: official artwork from Fire Red/Leaf Green
Signature code: me
Background: free to use (full credits in about me)
Hello, I'm having trouble making the an image that's the background full size.
For example, if I'm on my laptop, the image is about 100% width. However, when I do the testing on my phone, its only about half the width. Is there anyway to make it the same width no matter the device?
- ★
- ★
- ★
- ★
- ★
Star | She/Her | Psychopath
BORED TO DEATH!!
Collecting
x 500
x 500
Sells a variety of things!
Yes, you want the background-size properly, on the same block where you set the background image. Cover is my favorite, since it forces the image to fill the entire area without repeating or skewing. But you may need to pair it with background positioning, to control what parts get cropped.
https://www.w3schools.com/cssref/css3_pr_background-size.php
https://www.w3schools.com/cssref/pr_background-position.php
.example {
background: url("...");
background-size: cover;
background-position: center top;
}
QUOTE originally posted by Mirzam
Yes, you want the background-size properly, on the same block where you set the background image. Cover is my favorite, since it forces the image to fill the entire area without repeating or skewing. But you may need to pair it with background positioning, to control what parts get cropped.
https://www.w3schools.com/cssref/css3_pr_background-size.php
https://www.w3schools.com/cssref/pr_background-position.php
.example {
background: url("...");
background-size: cover;
background-position: center top;
}
code i used only for that particular block
background-image: url('https://i.postimg.cc/1X4F7hnZ/IMG-0700.jpg');
background-size: cover;
background-position: left center;
repeat-y: repeat;
font-family: 'Mulish';
Is this for your current signature or something else? Can you post a screenshot of what it looks like for you?
The image you linked is more square, so if you try to fit it into a rectangle using cover you'll get significant cropping. There are ways around this, but I'm not sure if any are really suitable for that specific image. Those options include: setting a secondary background to fill in where the image doesn't cover, altering the image to be more rectangular, or tiling the main image.
Trying to make code for tab and text keep going out box and tab itself going out as well I also need help with centre it and making it so tab box see through so you can see the background (not tab button but box where writing is)
Code
[sc=bg][sc=tabbed_interface horizontal][ul][
][li][h1]Title[/h1][/li][
][/ul][/sc]
[sc=tabbed_interface horizontal]
[ul][
][li]First Tab[/li][
][li]Second Tab[/li][
][li]Third Tab[/li][
][/ul][
][sc=tab-active]First Tab Text
[/sc][
][sc=tab]Second Tab Text
[/sc][
][sc=tab]Third Tab Text[/sc][
][/sc]
[/sc]
[style]
.greenbunny1998 {
/* code made by greenbunny1998*/ }
.edit {
/* image made greenbunny1998*/
}
.bg {
background-image: url("https://pokefarm.com/upload/:LrK/Template_background_I_made/Bulbasaur/Greenbunny1998_bulbasaur_template.png");
background-size: 100% auto;
background-repeat:no-repeat;
Box-sizing:border-box;
height: 450px;
width: 310px;
overflow: hidden;
}
.tabbed_interface
{
overflow: hidden;
background: #52BE80 ;
border: none;
max-width: 250px;
max-height: auto;
box-shadow: #145A32;
& > ul
{
background: #52BE80 ;
border: auto; green;
& > li
{
overflow: hidden;
background: #52BE80 ;
padding: 1px;
border: auto; green;
color: #148F77;
&.tab-active
{
overflow: hidden;
background: #52BE80 ;
}
}
& > li:hover
{
cursor: pointer;
}
}
> .tab, > .tab-active
{
overflow: hidden;
background: #52BE80 ;
color: #148F77;
padding: 25px;
}
}
[/style]
- First Tab
- Second Tab
- Credit
Free to use Pokèmon Avatars
Free to use animal Avatars
Greenbunny1998's Bingo
Greenbunny1998's Raffle
Feel free to talk to me on these:
Chicken Smoothie: Greenbunny1998
Discord: Greenbunny1998 #8985
Code made by Greenbunny1998
Forum Signature Picture is of my cat Coco as a kitten
Profile Picture is of my cat Coco
QUOTE originally posted by Greenbunny1998
Trying to make code for tab and text keep going out box and tab itself going out as well I also need help with centre it and making it so tab box see through so you can see the background (not tab button but box where writing is)
Code
[sc=bg][sc=tabbed_interface horizontal][ul][
][li][h1]Title[/h1][/li][
][/ul][/sc]
[sc=tabbed_interface horizontal]
[ul][
][li]First Tab[/li][
][li]Second Tab[/li][
][li]Third Tab[/li][
][/ul][
][sc=tab-active]First Tab Text
[/sc][
][sc=tab]Second Tab Text
[/sc][
][sc=tab]Third Tab Text[/sc][
][/sc]
[/sc]
[style]
.greenbunny1998 {
/* code made by greenbunny1998*/ }
.edit {
/* image made greenbunny1998*/
}
.bg {
background-image: url("https://pokefarm.com/upload/:LrK/Template_background_I_made/Bulbasaur/Greenbunny1998_bulbasaur_template.png");
background-size: 100% auto;
background-repeat:no-repeat;
Box-sizing:border-box;
height: 450px;
width: 310px;
overflow: hidden;
}
.tabbed_interface
{
overflow: hidden;
background: #52BE80 ;
border: none;
max-width: 250px;
max-height: auto;
box-shadow: #145A32;
& > ul
{
background: #52BE80 ;
border: auto; green;
& > li
{
overflow: hidden;
background: #52BE80 ;
padding: 1px;
border: auto; green;
color: #148F77;
&.tab-active
{
overflow: hidden;
background: #52BE80 ;
}
}
& > li:hover
{
cursor: pointer;
}
}
> .tab, > .tab-active
{
overflow: hidden;
background: #52BE80 ;
color: #148F77;
padding: 25px;
}
}
[/style]
Yeah tab boxes sorry
like this?
Oh oops silly me I forgot to add margin and thank you so much :D
Cannot post: Please log in to post