CODEWITHSUNDEEP
css
George Grigorita
George Grigorita

Reputation: 1890

CSS image / background scaling

Setup: I have this website with a top-header image that needs to resize properly depending on screen-size. This is the code I'm using:

HTML:

<img class="header-background" src="<?php echo get_template_directory_uri() . '/images/header.png';?>" alt="Header" />

CSS:

.header-background {
left: 0;
margin: auto;
right: 0;
position: absolute;
z-index: 91;
width: 100%;
margin-top: -35px;
}

Problem: The image size is 1900x227 pixels and I need it to resize properly depending on the resolution of each user.

This is how it supposed to look like. The blue top should remain the same on every resolution.

Would it be easier to replace the image with a CSS background / shape?

enter image description here

Upvotes: 0

Views: 132

Answers (2)

Vita Pluvia
Vita Pluvia

Reputation: 470

I think the best thing to do here is use Media Queries with min/max-height & relational values as well.

ex.:

@media all and(max-width: 980px) and (max-height: 980px){
    .headerImage{
        width:8em;
        height:90%;
    }
}

More information on media queries: http://css-tricks.com/css-media-queries/

Useful Tool to Convert Pixel Values to ems: http://pxtoem.com/

Upvotes: 0

Qiang
Qiang

Reputation: 656

You can add a static height like height:200px.

(Thats what I have found that works best on my computer).

Upvotes: 1

Related Questions