Ok this is really stumping me, probably because i don't understand it 100%. I have the following code to display a responsive background-image on the header:
.home .site-header-main:before{
display: block;
max-width: 100%;
max-height: 100%;
background-color: transparent;
background-image: url('/images/home-menu/home_honey_drip.png');
background-repeat: no-repeat;
background-size: 100%;
padding-top: 35%;
}
What i want it to do is display the 'home_honey_drip.png' under the menu text and then 'overflow' it over the top of the body content. I have tried adding position: absolute; However the image disappears.
Thank you in advance.
I think you need to use position relative and move the content of the menu to top.
You can do this using two divs, one with the image and other with the menu content.
#menu{
top:-100px;
position: relative;
color:white;
}
You can check my jsfiddle. Just add the rest of the css you need to your image.
Related
I'm having an issue getting rid of a horizontal scroll bar. I have my design setup with the sizing and positioning right, but I just want the overflow of the ::before image element trick to be hidden.
you can see what I mean here:
http://192.99.37.125/~uptownlounge/
I tried adding overflow-x: hidden; to the body element, but it gets messed up on mobile. any other ideas??
Please use width:100%; for mobile device with this selector: #dots-dark::before{}
Then the overflow issue will be fixed.
#dots-dark::before {
background-color: transparent;
background-image: url("https://s3.amazonaws.com/webdiner/dots-red-top-arrow.png");
background-position: top center;
background-repeat: no-repeat;
background-size: auto;
position: absolute;
content: " ";
height: 131px;
display: inline;
width: 100%;
left: 127%;
top: -131px;
margin-left: -804px;
}
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo
The style-sheet div in question is:
#leftColumn {
float: left;
width: 650px;
position: relative;
text-align:left;
padding: 0;
background-image: url(../images/contentBg.jpg);
background-repeat: repeat-y;
overflow: hidden;
}
The site isn't live yet but you can see what is happening on the page at http://www.downtowndefencelawyers.ca/index.php. It works fine in Chrome and Firefox but nothing that I have tried has worked in IE. Sorry if this is a basic fix but I seem to need help... :)
Have you tried changing the bottom image display property? display: block, display: inline-block, or display: inline? I'm not sure which one is the default for an image.
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}
I have two divs set at 100 pixels absolutely positioned on the left and right sides of the page. I have a content section margined between them. I want the images to scroll with the page as you scroll from top to bottom of the larger pages. There are seven total pages in my site of varying sizes and i am trying to use CSS to make this work. Can anyone help me?
Look at css fixed positioning.
position:fixed; top:0px; left:0px;
See here: http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar
Here is an example that might solve your problem.
It uses the background-attachment:fixed; but you could also use the position:fixed attibute depending on how you want to have your images static in an element or scroll with the page. The issue with the background option is it will require you to design a background image for it, but it will work.
EDIT: Here is an excellent post on fixed positioning and cross browser compatibility.
<div id="image1">
</div>
<div id="image2">
</div>
#image1 {
position: absolute;
width: 100px;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-image: url(../media/warlock.jpg);
min-height: 100%;
height: 100%;
background-position: center;
background-attachment: scroll;
}
#image2 {
position: absolute;
width: 100px;
top: 0px;
right: 0px;
padding: 0;
background-image: url(../media/paladin.jpg);
min-height: 100%;
height: 100%;
background-position: center;
background-attachment: scroll;
background-repeat: repeat;
}
That is basically the code for the two side divs. They are completly void of anything but background images that I want to scroll the length of the page.