How to Make Header Image Responsive

Responsive Header Image CSS

Try this:

.img-theme{
  width: 100%;
  height: auto;
  max-heigth: 500px !important;
}

This should auto-resize height based on width, 100% make the image responsive of device screen width. And your image won't be taller than 500 pixels.

Here is an example:

body{  margin: 0;}
.img-theme{  width: 100%;  height: auto;  max-height: 500px !important;}

<img class="img-theme" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg">

How to make Header image responsive?

When making a background-image responsive, you can use the background-size property. In the case of the above code, so long as your #header_area element has an implicit width (or an explicit one set with media queries), you should be able to say:

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
}

Why is header image not responsive?

background-size: contain vs cover

As Chris Coyier summarized here, background-size can provide various options, and cover might not be you're looking for here.

cover is focused on ensuring there's no space uncovered—practically extending the background image to all four edges beyond the containing boundaries. contain, on the other hand, is focused on ensuring there's no cropping happening on the background image—practically leaving uncovered areas blank.

If you intend your big image to remain intact, uncropped, and readable at all times, try adding the following to your .intro class.

background-size: contain;
background-color: #426CB4;

You already have your background-position: center as part of your background shorthand, so this should cover it. background-color line helps to fill the container with the same color as the logo background.

responsive stable background image in header

This is my solution:

1. Change .header width from 100vw to 100%
2. Change background-size from contain to 70% within .header
3. Add top to background: to anchor it to the top left

CSS:

.header {
    height: 100vh;
    width: 100%;
    background: url("https://i.imgur.com/aN7jCZE.png") top left no-repeat;
    background-size: contain;
    background-size: 70%;
}

codepen: https://codepen.io/CodeBoyCode/pen/VEEoQW

Make header responsive for different screen resolutions

You can use different images at different screen widths using css:

@media only screen and (max-width: 1023px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_FULLWIDTH.jpg') center center/cover no-repeat;
        min-height: 500px;
        width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_LARGE.jpg') center center/cover no-repeat;
        min-height: 400px;
    }
}
@media only screen and (max-width: 480px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_MEDIUM.jpg') center center/cover no-repeat;
        min-height: 300px;
    }
}

I will normally add this code into my template file and using wp_get_attachement(), load up different sizes of images. Or you can hard code it in your styles.css. Either way.

How to make page with image and text in header responsive?

It because you set col-2 for img parent and it sets width:16.666%. Just delete it if you want img parent to be 256x256.

<div class="me-0">
         @{
              string url = $"/images/trofee.png";
              <img src=@url class="rounded float-start image-responsive" height="256" width="256" />
          }
</div>

---

Related Topics