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!
Related
Is it possible to blend the iterations of a single background-image when background-repeat is set to repeat like so:
Solutions using javascript are also welcome.
Thanks in advance
You would need 2 images for this.
one that tiles seamlessly
and the starting top image which doesn't tile.
Your element will use the tileable one as its background. The background position Y should be the height of the non-tileable one.
You can then add a pseudo element ::before on top of your element positioned to the top which has the background of your non-tileable image.
div
{
position: relative;
width: 813px;
height: 2000px;
border: 3px solid red;
background-image: url(https://i.imgur.com/joeNpq8.png);
background-repeat: repeat-y;
background-position: 0 682px;
}
div::before
{
content: '';
width: 813px;
height: 682px;
background-image: url(https://i.imgur.com/iYgZFsw.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
<div></div>
Is this even possible?
I have a box and want to add one background image over the other. But i want to add an opacity 0.5 just
for the top image.
You can do it with pseudo element:
#example1 {
position: relative;
width: 500px;
height: 250px;
background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}
#example1:after {
content: "";
position: absolute;
top: 10%;
left: 10%;
opacity: .7;
z-index: 10;
width: 100px;
height: 100px;
background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
}
http://jsfiddle.net/Let8U/
Check out: http://www.css3.info/preview/multiple-backgrounds/ It would help somewhat.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
As you can see in the example given, there are two images - one center bottom and the other top left. For Opacity, I would do that in the image editor if I wanted to layer backgrounds.
There's no way to change a background-image's opacity.
What you can do is add an extra element with the desired opacity and background on top of your box.
This snippet on CSS-Tricks shows an elegant way of doing this with pseudo-elements, so you don't need to clutter your markup to achieve the effect: Transparent Background Images
Hope it helps.
I have two different gradients that need to repeat on the x axis. One gradient appears to the left of my page layout all the way to far left browser window and the other needs to repeat from the right of my page layout to the far right browser window. The entire width of the page has an image that blends into both and appears above the repeating backgrounds.
Ideally, I could use two DIVs and set them to 50% width, then place the 960 width part over top of both in the center of the window, but I don't see any way to do this.
How can I accomplish this using CSS? I need to support IE7+.
This should work. I would only make the green the repeatable image and use the background color to make the red (represented by "red" below).
CSS
body {
position: relative;
}
#left {
background: red url(/yourleftimagefile) bottom left repeat-x;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
z-index: 0;
}
#right {
background: red url(/yourrightimagefile) top left repeat-x;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 50%;
z-index: 0;
}
#center {
position: relative;
z-index: 1;
width: 960px;
margin: 0 auto;
}
HTML
<div id="#center"></div>
<div id="#left"></div>
<div id="#right"></div>
The html assumes a flexible height #center but it could be made a fixed height.
First of all, have a look at this example of the layout I'm trying to achieve (below)
Basically, I have a standard center div (gray) with the typical margin: 0 auto. My problem is that I have a background image (on the white overflow area) that is <div id="stripes"> with the following CSS
background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;
This background is applied BELOW the HTML level of the document to the #stripes div.
What I'm having trouble with is setting up the red div below. The plan is for it to stay visible at all times via position: fixed however, I can't use % based right: xx%; top: 0 because the pattern must line up with the striped pattern, so a few pixels offset will create a visible and obvious "seam" on the page.
Here is a look at the effect with the stripes included:
The way I ended up solving this was to create two divs. On the top layer, I used a standaard width: 960px; margin: 0 auto div and then at the end of the document I created another div with the same styles meant to act as a container for the photo (red div above). Inside of the second div I nested a <div id="photo_bg"> div. This div used the following styles:
#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}
the parent div was called #stripes
#stripes {
background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
height: 9999px;
left: 0;
overflow: visible;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
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.