Repeat-x property for CSS is not working as required.
I have a 50px image (to be used as background image).
I take a 200px div and set the 50px image as background with repeat-x css property.
The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.
css property:
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
from above link you may find correct background image
There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.
From your above code, For Instance,
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}
EDIT:
As per the updated fiddle provided by the OP, below is the solution.
WORKING DEMO
The CSS Code Change:
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>
Hope this helps.
try this one
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}
http://jsfiddle.net/c9j2D/7/
Related
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
I have a row of thumbnails (container elements) that are set to float left;
The thumbnails are scaled down to fit in a row.
<style type="text/css">
.thumbnails{
float:left;
position:relative;
}
.thumbnails img{
/* ... */
width:65px;
height:47px;
}
</style>
When the user hovers over a thumbnail, I would like to show a pop-up of the thumbnail with its original size:
<style type="text/css">
/* in addition to the above... */
.th_selector:hover img{
position:absolute;
top:-30px;
left:-30px;
width:150px;
height:113px;
display:block;
z-index:999;
}
</style>
Once I move the mouse over a thumbnail, the image bigger image is shown (as intended).
But I have two problems:
1) The other thumbnails jump one position to the left. They end up below the pop-up image. This can also create a flicker (depending on the position of the mouse pointer).
2) If the window is too small and if there are two rows of thumbnails, there is a line-break (which is not very nice).
How could I create a row of thumbnails with a nice hover-image, while keeping the original position of the thumbnails?
.thumbnails {
float:left;
position:relative;
width: 65px;
margin-right: 10px;
}
.thumbnails img{
position:relative;
display:block;
width:65px;
height:47px;
}
.thumbnails:hover img {
top:-25px;
left:-40px;
width:150px;
height:100px;
z-index:999;
}
http://jsfiddle.net/functionfirst/V4YaQ/1/
In your code example, you shouldn't use position absolute as this declaration removes the element from the document flow. This essentially means the element no longer has a 'foot-print' on the page, hence thumbnails to the right are effectively collapsing in under the now absolutely positioned element.
I am using the following CSS on anchor tags with specific classes. Works OK except that long link text is forced into new lines. I guess this has to do with the width...
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
try this
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
you need to maximize the width for that use 100% width or maximum width your design allow you.
a.interactive {
/*...*/
white-space: nowrap;
}
Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?
I can use multiple background images:
div.arrow{
background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}
The html:
<div class="arrow">This text is on a transparent background</div>
This gives me an div with an arrow-head and tail, and a transparent middle-section.
It does not seem possible specify the color to the middle section.
With only one background-image, you could do this:
div.arrow{ background: red url('some_image.png') no-repeat; }
I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?
No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):
div.arrow {
background: url('arrowtail.png') left no-repeat,
url('arrowhead.png') right no-repeat,
red;
}
Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.
jsFiddle demo
Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):
div.arrow {
background: url('arrowtail.png') left no-repeat,
url('arrowhead.png') right no-repeat;
}
/* Assuming your red arrow has this ID */
#red {
background-color: red;
}
jsFiddle demo
I find using multiple background images to be problematic for things like this. Have you considered using the :before and :after pseudo elements? I wrote up a quick example:
<style>
.arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
.arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
.arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>
<div class="arrow">This text is on a transparent background</div>
Just replace the background color in the :before and :after declarations to the arrow images you want.
I was able to add multiple background-images and background-color like this:
background: url(../images/vis.png) no-repeat right, url(../images/vis.png) no-repeat left #fff;
So I have a background image for my content on a site and was wondering if there was a way to make the background repeat on the y axis when content starts to overflow. Here is what it looks like: http://ithacawebdesigners.com/temp_data/wildfirewp/
Thanks!
e. here is the div
#content {
float:left;
height:100%;
width:860px;
padding-top:10px;
background:url('http://ithacawebdesigners.com/temp_data/wildfirewp/images/contentbackw.png') repeat-y;
margin:0 0 0 70px;
}
In your layout.css file you have this block around line 260:
#content .page,#content .attachment,.postcontent {
height:500px;
width:720px;
margin-top:15px;
margin-left:30px;
float:left;
}
Remove the height rule; it is limiting the height of your background. Unfortunately your background doesn't tile well, but this will get you started.
Remove the fixed height (500px) from your .postcontent css class. Everything else seems to be in order.
If you set the CSS to use background-repeat:repeat-y;
It should work
Try this:
background-repeat: repeat-y;
In your CSS add:
background-repeat : repeat-y;