I'm currently having difficulties in the header to resize/position a div with a background image.I did some google searches, but nothing really helped me..
The header has a logo, which is in a div called "header-left-section". On the top right of the logo, there is a navigation menu aligned within a div called "header-right-section". Those divs were already present in the theme.
We now wanted an image below the navigation menu and also on the right side of the logo. For that, I created a div tag "bottom-header-section" and set the image as the background image. Now I read several topics, that the background image doesnt show if there isnt a height and width set to it because therefor the div wouldnt have a size.
Now my problem is, that as soon as I make my browser window smaller, the div with the background image is set bellow the logo and menu, which I dont want at all.
This is my divs css code:
#bottom-header-section {
background-image: url('website/wertesystem/wp-content/uploads/2018/10/title-new.png');
float:left;
height: 120px;
width: 800px;
margin: inherit;
background-position: right bottom;
background-repeat: no-repeat;
}
With my understanding, now that I set the height to 120px and the width to 800px, this I set a fixed size to the div and as soon as I make the window smaller, the div keeps the same size but changes position because there isn't any more space on the same line as before right?
So what's the best way to align this div, on the right side of the logo and keep it responsive?
If you need a link to the website, please just tell me.
You can try to add something like this for the smaller breakpoint.
#bottom-header-section {
height: 65px;
width: 65%;
background-size: contain;
}
You might have to play with the height and width as it gets smaller.
Related
I'm having an issue where I my background image isn't showing in a specific circumstance, and when it does there are some issues.
<div id="indHeader">
<div id=" indImg">
content goes here
</div><!-- end of indHeader-->
</div> <!-- end of indImg-->
If I have the div ids swapped, the image shows as normal - the issue being it gets messed up when messing with the size of the page (the image reduces in size, but there is a growing margin like space above the image. The width remains 100%, but the height does not.) If I have it as it is in the above code, the background image does not show at all.
#indImg {
background-image: url("../images/index_header.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
}
Would there be a way to have the background show in the indImg div, or to not have it move when adjusting the size of the page? If I remove the background-size style, it somewhat fixes it but then the image does not fit 100% of the browser width. Adjusting background-position changes where the height changes, e.g removing the current property makes the image go to the top, not the bottom.
Image sort of showing what I mean.
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
I have a header Image width of 100% and height of 120px on top of the Page.
I want to display Header text on that Header Image in the center.
I want to display another small Image on the right hand side of the header Image of 80% of the height of the header image leaving 10% on top and bottom.
I want to leave 5px on the right hand side of the small Image also. So that Small Image will look as it is on the header Image.
What is CSS to get this ?
Thanks in Advance
I'd set the image as background via CSS, then I'd position the other elements, the text you want in the center and the other small image to the right, via two separate HTML absolute positioning Divs tags. Make certain the CSS ID tag is set to relative...
<div style="width: 200px; height: 23px; position: absolute; right: 12px; top: 399px;" align="center">YOUR IMAGE OR TEXT HERE</div>
Set the parameters to your needs, of course.
I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.
I'm trying to improve user compatibility of a site for 800 x 600px monitors.
I have a 'headerbackground' div which is 900px wide, and contains nothing but a background image. The rest of the site is nested inside that div, with a width of 790px.
What I'd like to do is show the full 900px 'headerbackground' div if the browser window is greater than 900px, but not trigger a horizontal scrollbar in the browser if the screen res is between 790 & 900px.
I'm aware that this can be easily achieved with a centered 'background' image on the body tag, but that isn't a feasible option in this case because the current body background image has a horizontally-repeating background, and the header background image doesn't repeat.
Any suggestions appreciated
Edit: Image attached for clarity.
If you use the CSS background-image property for your 'headerbackground div,' and headerbackground is less than the size of the background image, a scroll bar will not be triggered. Rather, the background image will be truncated.
Update:
You should be able to make your headerbackground div non fixed-width so it fills the entire body. Then, you could make its background image centered. Try this for your CSS:
body { background-color: blue; }
#headerbackground {
background-color: red;
background-image: url(your/url.png);
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#content {
background-color: green;
width: 790px;
margin-left: auto;
margin-right: auto;
}
...Aand a couple minutes after I post, I figure it out for myself. Sorry. In case anyone else has the same problem:
Give headerbackground div a width of 100%, and a min-width the same as the internal divs. Center the headerbackground div's background image. Finally, you'll need a min-width hack to make IE 6 happy.