how would I go about making this kind of background: i have a 150px x 150px image which I would like to repeat through the whole background. But the very top line (the top 150px) a different image should repeat just on the x axis. And same on the bottom, the bottom line a third image should repeat on the x axis. How would I do this? Thank you!
Try this out!
body {
bacground: url(topbackground.png) repeat-x,
url(bottombackground.png) bottom fixed repeat-x,
url(centerbackground.png);
}
Also, here's a link to an example with a bunch of kitten pictures!
http://jsfiddle.net/7Rt99/
You could create 3 different divs for this so that you can repeat each background in separate parts.
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
#one{
background-image:url('http://www.shrtclothing.com/images/share/facebookthumb.jpeg');
background-image:repeat;
width:1000px;
height:150px;
}
http://jsfiddle.net/hVvdL/
Related
I have been searching for answers everywhere and can't find one that fits my needs. So I created a Fiddle to explain what I want to achieve: http://jsfiddle.net/Fran6/jbo5pfs4/3/
HTML:
<div class="col1">
<img></img>
<h1>Title 1</h1>
</div>
<div class="col2">
<div class="box1"><img></img>
<h1>Title 2</h1>
</div>
<div class="box2"><img></img>
<h1>Title 3</h1>
</div>
<div class="box3"><img></img>
<h1>Title 4</h1>
</div>
</div>
I have containers positioned on the page. They have images and I would like to have them not stretched. I actually would like the same effect than for background-image: cover. That is my first question.
Then, I would like to have a zoom effect on the image when I hover it, via the link that is implemented with the title.
I can achieve these things separately but not together. Also, I started by using background images instead of in HTML but could not do the zoom effect.
So if anyone could help me solve my problem, that would be very nice !! :-)
Thanks !
I can complete the background-image: cover. Create a html tag with a id of 'cover' like so...
<div id="cover">
<!-- content -->
</div>
Then, you need to do the following in CSS.
#cover {
padding: 0, 0, 0, 0;
background: url(http://placehold.it/300x150) top left no-repeat;
background-size: cover;
height: 300px;
}
I would imagine to do the zoom effect, you could possibly use :hover although I'm not 100% sure.
Hope this helps though.
I have a DIV named mediashelter and there are four small photos inside the DIV
#mediashelter
{
width:200px;
height:300px;
background-color:black;
}
and inside the div are four small pictures placed vertically using
<div id="mediashelter" >
<img src="./images/fubu.jpg"><br>
<img src="./images/li.jpg"><br>
<img src="./images/t.jpg"><br>
<img src="./images/g.jpg">
</div>
how do I center the four small pictures inside the black rectangle named mediashelter? Thanks a lot once again
If you add text-align: center to #mediashelter, it works perfectly.
Fiddle:
http://jsfiddle.net/3Ff63/
Try this:
<div id="mediashelter" align="center">
I have 4 images in a row. I want the third image to be overlayed on top of the second image but have not been able to successfully get it to work. Here is my fiddle:
http://jsfiddle.net/AndroidDev/Asu7V/4/
<div style="width:1000px">
<div class="x">
<img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
</div>
<div class="x">
<img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
</div>
<div class="x">
<img src="http://playgo.ro/wp-content/themes/play3.0/play.png" />
</div>
<div class="x">
<img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
Add the play image in second div and use position absolute and relative to make it one above the another.
.x{
border:1px solid #000000;
display:inline-block;
height:128px;
position:relative
}
.overlay_img{
position:absolute;
top:0;
left:0
}
DEMO
If you just want it to be over 2nd image then wrap those 2 images in 1 div and give it position:relative then give your Image2 and image 3 position:absolute and z-index:0 & z-index:1 respectively. And position them to top:0; & left:0; that should do it :)
If you can use modern CSS and only need the third image to overlay the second (as in, you don't need to repeat this pattern in a lot of places), you can use the nth-child selector:
.x:nth-child(3) {
margin-left: -136px;
}
This will select the third item with the x class and move it to the left.
if you use margin or position property,you can achieve the overlayed view,
Take a look at http://jsfiddle.net/manojmcet/Z7Y88/
I dinamically create the following div structure:
<div id=Box>
<div id=outer>
<div id="inner1" class="split_right">
some
</div>
<div id="inner2" class="split_left">
some
</div>
.....
.....
<div id="inner(n)" class="split_right">
some
</div>
<div id="inner(n+1)" class="split_left">
some
</div>
</div>
</div>
The number of divs is dependent on the number of s passed in one array.
The problem is, that I want to give a css rule to split_right and split_left like this:
.split_left {
float: left;
margin: 0px 10px 5px 10px;
}
.split_right {
float: right;
margin: 0px 10px 5px 10px;
}
This works fine on chrome and safari but doesn't work in any IE6+
What am I doing wrong??
UPDATE
This is what I am trying to do:
http://postimage.org/image/g2t4qsq4v/
The outer div has a fixed width equal to 2*inner div width + 50pixels so that 2 s fit together in the same line.
Try it with this:
<div id=Box>
<div id=outer>
<div id=inner1 class="split_right">
some image
</div>
<div id=inner2 class="split_left">
some image
</div>
.....
.....
<div id=inner(n) class="split_right">
some image
</div>
<div id=inner(n+1) class="split_left">
some image
</div>
</div>
</div>
You have forgotten the quotes
Not sure exactly what is not working in IE and I don't know if you have a wrapper with a defined width that fits those just perfectly. But there is a famous bug in IE 6.. maybe 7 too I am not sure. If you have float left and margin in the same direction for example float left, and margin left xx number of pixels in IE 6 it will double the margin. So if you do have a define spaced that those boxes supposed to fit into, in IE it will most likely wrap to the next line making it look like it is not floating
add
display: inline;
to the css of each split class
I'm wondering how to make two child divs share a parent div.
I want the left column to contain text from a database (one word). This could be 1-10 letters long. Since I want the left columns width to fit the word perfectly, I don't give it a set width.
Then, I was trying to have the right column fill the remaining space.
Is there an easy way to do this?
I'm not sure what to set the right column's css to make this happen.
<div id="parent_div" style="width: 100px; height: 100px;">
<div style="background-color:blue; float:left;" id="left_column">
blue
</div>
<div style="background-color:red; float: left;" id="right_column">
red
</div>
</div>
I read you shouldn't have something floated without giving it a set width, but then it seems like what I want would be impossible.
Thanks
I think you'll get the effect you want if you just don't float the second div.
<body>
<div id="parent_div" style="width: 100px; height: 100px;">
<div id="left_column" style="background-color: blue; float: left;"> blue </div>
<div id="right_column" style="background-color: red;"> red </div>
</div>
</body>
In firefox, this does exactly what you want. The red column takes up any remaining space not taken by the blue column.
Well, for a start, I would suggest that you make the right column float to the right - that should put it next to the left column. Not sure about the width of the left column though.