CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Valrok
Valrok

Reputation: 1574

Avoiding CSS overriding bootstrap

I'm using css to alter how several images look. One thing that I always had issues with before however was that images would get cut when screen size is made smaller. Below is an example of one class I made.

.headerimage {
  height: 400px;
  width: 900px;
  margin: 0 auto;
  background: url(../images/metal.jpg);
}

I've recently started using bootstrap and noticed an img-responsive class that allows for images to be dynamically altered to fit on any webpage regardless of the size.

Using the img-responsive class however does not work when I use any of my css image classes. I've tried the following but my css classes always override bootstrap's img-responsive class. 

<div class="img-responsive headerimage "></div>

Is there a method to make my css classes for images not override bootstrap's img-responsive or would I need to use HTML to call my images?

<img class="img-responsive" src="/images/metal.jpg" height="400" width="900" />

Upvotes: 0

Views: 482

Answers (1)

tobiv
tobiv

Reputation: 842

In your case I think what you're looking for is background-size:

.headerimage {
    max-width: 900px;
    background: url(...);
    background-size: cover;
}

That way your background image will always fill your div, which in turn adjusts to the container up to its max-width (which you can probably omit as well if you have some sort of a container that defines your pages width).

Upvotes: 1

Related Questions