I would like to know how do I achieve the effect in attached image. Logo is an image and transparent while there is still a background to the top navigation.
Thus if user scrolls down, the logo "changes" based on image or color behind it.
I have tried making two divs ( logo and links) within main div ( 100% width and 80px height). If logo is 200px wide, how do I ensure the right division always fills the rest of the viewport.
.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;}
.links{width:???;background:#272727;float:right;}
Appreciate any help and seeing alternative methods.
give widths of the logo and links in percentages which makes the logo container responsive.
.logo{
width:20%;
}
.links{
width:80%;
}
Try this code:
CSS:
.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:background-size:100% 100%;}
.links{width:80%;background:#272727;float:right;}
None of the proposed solutions worked under different resolutions.
Best solution probably is to have 2000px image as header and overflow:hidden.
Thank you
Related
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.
I'm making a website with bootstrap's Carousel.
I wish that when the window size is reduced the image in carousel cut equally both left and right margin. How can I do it?
I've used overflow: hidden in the css to cut the image but but is reduced only in the right margin!
Sorry for my bad English, hope to find a solution with you.
Make sure that the image position is centered then when the image is resized, the image will be 'cut' from both sides.
img{
background-position:center;
}
I was wondering if someone could point me in the right direction. I have a div with a large background image. The BG image is set to contain so it will expand and contract with browser size. The issue I'm having is if you shrink the browser, the div still shows the height to 1000px. So while the image expands properly to fit, if you begin to scroll down you see the large gap that now occupies the 1000px height under the picture where the body bg color comes through (since the picture has shrunk via the contain). How can I make it so the div moves up and the gap disappears? I have seen this done on several sites.
CSS Code:
.contain { background-size: contain; }
.mainsplashtop {
width:100%;
height:1000px;
background-image:url(../images/main_splash.jpg);
background-repeat:no-repeat;
margin-top:0;
}
HTML
<div data-stellar-background-ratio="0.5" class="mainsplashtop contain"><a class="scroll" href="#destination1"></a></div>
You can see what I mean on the site (please disregard the disaray as its still in early development)
www.doyouhaveasaddle.com
Here are examples of what im trying to achieve.
http://www.unbornink.com/
http://www.fmolinari.com
Thanks in advance.
I have a website that one half is white and the other half it dark gray. I am using a wrapper now that gives it a defined width and centers it like this: margin: 0px auto 0px auto;.
If you look at the website here (link removed), you will see the dark bar has stopped and is confined to that width. What would be my best bet in order to achieve this?
You can look at my stylesheet here (link removed).
Thanks in advance!Coulton
To extend the dark gray background from div.right_bar all the way to the right side of the screen, you can remove the width from the parent element div.wrapper. For example:
.wrapper { width: 100%; }
When the width on div.wrapper is specified, it doesn't fill all of the horizontal space of the page, and the white from the body element shows through.
Done this a few times.
Create a LOOOONG horizontal line of that grey color as an image. Make it like 1200px wide (1px in height). Then in CSS set it as the body background with something like this:
background:url("urlToLongHorizontalLine.png") repeat-y scroll 52% 0 transparent;
the 52% will position it so that it only begins at about the center (you may have to adjust it slightly), and repeat-y will tile it vertically.
Let me know if you have any questions.
Perhaps inside your main div, create two more divs - left and right. Then in CSS define their size/position, etc.
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.