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;
}
Related
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.
I am attempting to make a sidebar for a tumblr page have a curved header and the rest of the sidebar be squared with 100% height so it flows off the "page" with no visible footer. I have layered backgrounds and as you might expect the square background with current coding is going to show at the top of the curve removing the transparent affect I want at the top.
This is the live preview.
Here is the coding used for those side bars:
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'),
url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: no-repeat, repeat-y;
background-color: #b8a6a5;
position: absolute;
min-height: 100%;
top: 0px;
width: 345px; }
Is there a way of accomplishing my goal without making a separate div for the top of each side?
To get this to work, you need to use the :before selector:
#left:before, #right:before{
height: 100px;
width: 345px;
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png');
position: absolute;
top: -100px;
content: " ";
}
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
top: 100px;
width: 345px;
}
Note that I've bumped down the main divs with top: 100px;, bumped up the :before part with top: -100px;, and moved the header background image to the :before.
Oki doki the best way for you to do this would be to use the css style background-position.
For example
img {
background-position :-10px 0px;
}
The above with offset the image by - 10px to the left and 0px to the top.
I hope that helps!
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
I'm trying to learn how to use the :before and :after pseudo elements. I'm trying to add a black background to the bottom of the page as a sticky footer but it doesn't seem to be working correctly.
Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background.
I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome!
Here's my CSS:
html {
background-image: url('images/template/html-bg.jpg');
background-position: top left;
background-repeat: repeat-x;
background-color: #0e0e0e;
height: 100%;
position: relative;
}
html:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
In FF the page is rendered as I'd expect but in Chrome the whole page is black... Any ideas, am I doing this wrong?
Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html element) anyway, which is exactly what Firefox is doing.
Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body instead:
body:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
Depending on your layout, you may need to either keep your html rule or change it to body as well.
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.