Make resizable background image fit screen's size in width

Question

Here is my CSS code:

.TabTop {
background-image: url("https://i.imgur.com/5qOZqaY.png");
width: 1855px;
height: 168px;
background-repeat: no-repeat;
}
.TabMid {
background-image: url("https://i.imgur.com/6uMuiY4.jpg");
width: 1855px;
height: 100%;
background-repeat: repeat-y;
}
.TabBot {
background-image: url("https://i.imgur.com/5Psk33C.png");
width: 1855px;
height: 237px;
}

And here's my HTML code:

<div class="TaTop"></div>
<div class="TabMid"></div>
<div class="TabBot"></div>

Right now it looks like this: https://i.stack.imgur.com/IKtcM.jpg

As you can see on the right there is a gap.

I would like all 3 parts of the image to be centered and resized in width according to the size of the user's computer monitor size.

I also tried background-size: cover it doesn't seem to work.

How could I do that?

have you seen [this post](https://stackoverflow.com/questions/8200204/fit-background-image-to-div) ? — St3an, Apr 17 '18 at 13:54
What does the structure of your html look like for this container? — jstoobz, Apr 17 '18 at 14:24

score 0 · Answer 1 · answered Apr 17 '18 at 14:54

0

Using background-size: cover should do the trick. But it won't give you that much control.

For that you should use Media queries and some more background properties.

@media only screen and (max-width:420px) { .TabTop { background-position: center } }

You could try more media query sizes to get more control on how your image should look on different device.

Here's Media queries guide for more examples.

answered Apr 17 '18 at 14:54

Priyash

162
2
12

background-size: cover doesn't work for me, it doesn't change anything. – Hamid Zafar Apr 17 '18 at 14:57
Ya go for media queries it'll give you more control for each screen size. Basically there are 4-5 media queries that should handle all screen types – Priyash Apr 17 '18 at 14:59
Go through guide I've posted in answer – Priyash Apr 17 '18 at 15:00
I just tried the media query tag for large screens on the top background image part, and the image just completely vanished instead of scaling on the width. – Hamid Zafar Apr 17 '18 at 15:02
Here is the code I used: @media only screen and (min-width : 1824px) { .TabTop { background-image: url("./images/Halo_Top.png"); background-position: center } } – Hamid Zafar Apr 17 '18 at 15:06
Also add background-size to it – Priyash Apr 17 '18 at 15:27
That background-position : center; is example purpose. You'll have to set different sizes for different screen size as per you requirement – Priyash Apr 17 '18 at 15:29
background-position is used to position image on div. – Priyash Apr 17 '18 at 15:31

score 0 · Answer 2 · answered Apr 17 '18 at 23:42

you lack a 'b' in Class of 'TabTop' and if you use 100% in Height it usually does not work if the parent has some class that references that value like position:relative.

.TabTop {
background-image: url("https://i.imgur.com/5qOZqaY.png");
width: 1855px;
height: 168px;
background-repeat: no-repeat;
}
.TabMid {
background-image: url("https://i.imgur.com/6uMuiY4.jpg");
width: 1855px;
height: 100vh; /* alternative for % */
background-repeat: repeat-y;
}
.TabBot {
background-image: url("https://i.imgur.com/5Psk33C.png");
width: 1855px;
height: 237px;
}

<div class="TabTop"></div>
<div class="TabMid"></div>
<div class="TabBot"></div>

Make resizable background image fit screen's size in width

2 Answers2