CODEWITHSUNDEEP
cssbackground-image
Izaias
Izaias

Reputation: 389

CSS responsive background-image

I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.

Now I'm trying to do the same but using background-image instead of the image tag.

Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.

Thanks in advance.

Upvotes: 0

Views: 166

Answers (1)

user5162141
user5162141

Reputation:

If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.

ex: background: #ffa949 url('example.jpg') no-repeat center / cover;

After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.

Upvotes: 2

Related Questions