A newbie css problem

[techaboard]

See i have this code for

[div id=”wrapper”]
[header][img src=”logo.png”][/header]
[/div]

html
{
width:100%;
height:100%;
padding:0;
margin:0;
max-width:100%;
max-height:100%;
overflow:auto;
background-attachment:fixed;
background-color:black;
}
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
max-width:100%;
max-height:100%;
overflow:auto;
background-attachment:fixed;
background-color:black;
}
#wrapper
{
position:relative;
height:100%;
width:100%;
padding:0;
margin:0;
background:url(“background.jpeg”);
background-repeat:no-repeat;
background-color:black;
max-width:100%;
max-height:100%;
overflow:auto;
background-attachment:fixed;
}
header
{
position:relative;
left:25%;
max-width:100%;
max-height:20%;
height:20%;
}
header img
{
display:block;
position:relative;
width:50%;
height:70%;
max-height:70%;
max-width:50%;
}

the problem is that when i zoom out in the browser the logo remains of the same size but everything else becomes small but i want that the image also becomes small as i resize.Here is the link to the screenshot image http://postimage.org/image/xg3fbn7s5/ .I am new in css so please help me
I really appreciate it.

[djrolstad]

post this on codepen.io

[Paulie_D]

header img
{
display:block;
position:relative;
width:50%;
height:70%;
max-height:70%;
max-width:50%;
}

Off hand, I would say this is the problem. Try removing the set width / height, especially as you have already set max values.

Also, there seems to be a lot of unnecessary/repeated css & positioning listed in your stylesheet. You might want to think about removing a lot of it.

[techaboard]

http://codepen.io/anirudhm/full/beCui
Here is the link for codepen
Please help me.I am a beginner in css

[kevin11189]

As @Paulie_D mentioned there is a lot of unnecessary/repeated CSS in there.

What it comes down to, is that all of it’s parents divs are set to 100%. This means that these are going to 100% of the width of the browser window. In this example, the width of this image is 50% of that. So, in turn, the width of that image is going to be 50% of the browser window no matter the zoom or width.

Do you follow what’s happening with that?

[techaboard]

How can i improve this code?
I removed all the unnecessary size declarations but it still happens

[Paulie_D]

Where is your new code…have you updated your Codepen?

[wolfcry911]

@techaboard,
Here’s a [fork of your pen](http://codepen.io/wolfcry911/pen/vKJFg “”) with the minimum amount of CSS needed.

[Author]

Posts