I have a header background that I would like to bleed indefinitely on the x axis. So regardless of the size of someones monitor, the grey background would extend.
How do I do this?
Thanks!
Two answers, depending on what issue you're exactly facing.
First case: The background isn't repeating at all
Assuming you're using a CSS background-image to render your background, use background-repeat: repeat-x;
Little demo: little link.
If you're not using a background-image to render your background, then you should consider using it. There's no direct way of making an <img> repeat.
Second case: The background is repeating, it's just not spanning the whole width
You need to make sure your header has width: 100%;. If you have some padding to your headers parent, use display: block; instead of width: 100%;, otherwise it'll overflow.
Related
I was wondering if it is possible to apply a single CSS3 gradient background to multiple elements. In other words, the gradient spans over the parent element but is only visible inside the child elements.
After searching, I found this thread: Applying gradient over multiple views
This is exactly my problem, though I need it as CSS/HTML code.
To visualize the problem, I made two pictures:
This is the basic setting. The two <div>s needing a gradient background are inside a larger <div> element.
As you can see, the gradient in the second image perfecly fades from element A to element B.
This effect is easily doable in most image-editing programs, so I could just use an appropriate image to get the desired effect.
However, since images are probably not the best way to solve this, I hope to find an answer here on how to do this with only CSS. I used gradients before, but I have not found a solution to this problem on my own yet.
Any help is appreciated.
EDIT (06/01/15 13:30 GMT+1):
The Elements A and B should be able to have round corners.
The spanning gradient was originally supposed to be a radial-gradient, but it does not need to be.
Maybe the problem is really not solvable.
(Even if this qestion is quite very old...)
Have a look at Multiple.js - which describes how to apply a gradient to multiple elements without js.
Quoted from the demo page:
.selector {
background-image: linear-gradient(white, black);
background-size: cover;
background-position: center;
background-attachment: fixed; /* <- here it is */
width: 100px;
height: 100px;
}
background-attachment: fixed expands background to viewport's size and displays in every element appropriate chunk, exactly what is needed!
The idea behind this is simple as smart and works for most modern browsers (IE8 too).
If applied it looks like this:
Demo: https://jsfiddle.net/andrewgu/gptbyejt/
One way to accomplish this is that you could always fake it with a solid background color. You display the gradient div in the background and whatever content divs you want, separated with an overlaying div whose color matches the background.
Pros: Flexible, compatible
Cons: Solid background colors only
The other way is to use something called CSS clipping. You can do this using the CSS declarations of clip-path and -webkit-clip-path. This basically makes part of an element transparent. However, you need to specify the size of each element beforehand, and tweak it around a bit to get the items to display correctly. This method works with non-solid backgrounds. Contrary to popular belief, CSS clipping is pretty good with cross-browser compatability.
Pros: Patterned backgrounds, compatible
Cons: Defined child-element sizes, tweaking
Combination of background-attachment: fixed and iframe may do this trick for you.
Check out nexts.github.io/Multiple.js and pay attention to "How it works" section
I have the strict need to set a big background under a little button icon in such a way:
<img
src="little-icon.png"
style="background: url('main-image.jpg') no-repeat center;
margin: auto; padding: 0;
height: 240px; width: 180px;"
/>
Where height and width are the parameters of the (big) main background image. In a nutshell: I need to set img.src as a clickable icon, and its background-image as a big image. This is something quite simple to do with a div tag which wraps the img one. But I have, due to other circumstances, to do all in the same img tag.
The code right above does its job, but the icon is deformed to the size of the background one. Is there the chance to do what I need to do?
I think there are better ways to do this, but if you absolutely have to do it your way, use padding - setting the width and height of your image with CSS, will definitely deform it ...
Example here (using :hover as way of explanation)
No, there is no way you can do that inside of one img tag, as the background and the image itself are assigned the same height and width so they will always overlap each other and be stretchd or shrunk into the dimensions you specify.
What you could do is merge the images into one, thats probably your only chance in case you are really stuck with a one tag only policy.
Definitely, when you apply height and width style to img tag, it will apply to the main image ie image in src. You can only control the background position within that area.
As per the question, if you want large background below, small icon, you need to create the large image of icon with transparent background.
Question
I'd like the CSS background texture for my content area to begin immediately after a variable-height header. The texture has a natural height of 900px and is graduated to a flat color, so if it fits in the available space between content-start and body-end, the whole texture should be displayed. The texture shouldn't artificially expand the content area or cause unnecessary scroll, but scroll should still appear when content is longer than fits in the page.
JSFiddle
On request, here's a JSFiddle of my issue. Since there's really only one DOM element in the question, I think the fiddle doesn't clarify much. http://jsfiddle.net/AbEUe/5/
What doesn't work
#contentAndBackground {
padding-bottom: 900px;
margin-bottom: -900px;
background: url('my900pxHighImage.png') repeat-x;
}
The above ensures the whole image is shown, but the negative margin doesn't keep the unnecessary scrollbars away as I'd hoped.
#contentAndBackground {
min-height: 900px;
background: url('my900pxHighImage.png') repeat-x;
}
Same problem. The whole image is shown, but scrollbars are always showing.
I'd like to avoid using JavaScript that needs to handle screen resizing.
I think I did it: http://jsfiddle.net/AbEUe/7/
I have created 2 container divs, both have a height of 100%.
The first contains header and background, and has overflow:hidden so the background is stopped at the bottom.
The second contains header and content, and because of use of positioning this one is on top of the first container, and it can stretch to more than 100% (if the amount of text requires that).
You can see you have to render the header twice, but that won't matter because the first isnt visible.
Edit:
Solved the last problem (see comment) by also setting the background to the content div. See http://jsfiddle.net/AbEUe/8/
Your question is not very clear, but this prevents your kitties from being chopped up.
#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
Which code in HTML will allow me to use an image as a background image for a table, but not so that it would be repeated several times vertically and horizontally (in case the table is several times bigger than the image), but in such way that the image height is stretched out to be equal to the height of the table, and its width is stretched out to be equal to the width of the table?
The CSS background options can't handle this reliably across browsers, so you need to put an <img> tag in the table and position it appropriately. As Petr Marek alluded to in the comments, you can do this with the CSS attributes z-index and position, but it's not elegant.
If you set position: relative on the table, you can set position: absolute on the <img> with top: 0; height: 100%; left: 0; width: 100%; to position and size the image, and set z-index: -1 to make it appear behind the other content.
Here's a working example on jsFiddle.
Although it works perfectly for me in Chrome, since you're putting content on top of an image I wouldn't be surprised if it caused some browsers to mess up text selection or something else.
Presentation is the job of CSS, not HTML. You can use background-size in supporting browsers.
HTML stands for Hypertext Markup Language. It is not code. It is intended to provide semantic meaning and structure to a web-accessible document. Entities such as images are purely presentational cruft that was added because we got bored just reading text all day.
That being said, you can use CSS to possibly achieve what you want, but it may be bit tricky. An idea that comes to mind is adding an image element to the page with a height and a width set to be 100% of its container, and then positioning your table, with a transparent background color, over it. You'll have to look into z-indexes, obviously.