Responsive background image

HTML-CSS
1

Hello! I am trying to create a homepage. But the problem is, my image is too big, so the scrollbars appear. Image resolution is 1920x1280 and mine screen is 1366x768. I want to make a responsive background image.
Here is the part of the code in html:

    <img src="city.jpg">

</body>

and here is the css code:
body img {
background-image: url(city.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
How to make my image responsive (so that it automatically scales to the screen size)?

2

Hey friend!

Try “width: 100%” or “height: 100%”

Cheers!

3

Also , check this:

https://www.w3schools.com/CSSref/css_units.asp

There is a section with relative units! Like, vh, vw, ect.
(vh stands for viewport height, vw - viewport width.)
Anyway, there are a lot of ways to make a div/image 100%, 50% of the screen or any other size you want :smiley: :smiley: :smiley:

4

Thanks! i added it to my css code, but to no avail.

5

Can you show the code you have as a result? :smiley:

6

CSS code:
body img {
background-image: url(city.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
width: 100vw;
height: 100vh;
}

the background image is included in the body tag in my html.

7
  1. you have scr property in img tag - you don’t need this:
background-image: url(city.jpg);
  1. instead of "body img " you can just write "img ":
img {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
width: 100vw;
height: 100vh;
}
  1. you will probably still get a scroll, because there is a default margin around the picture, right @hawy ?
8

Thanks! I have changed mine to yours. But yes I still get a scroll. I added this:

* {
    margin: 0;
    padding: 0;
}