Is there a way to make an image repeat beyond the element div that it is placed in? When the browser is maximized, the picture will stop where the footer stops but I'd like to repeat to the max height of the browser. Possible without putting the image in the body bg? I can't place it in the body bg because of a jquery animation, and IE gradient code and an image can't be put together. Thanks.
-edit- found the solution
background image vertical repeat for a div
set the html and body in css with height:100%;
and also height:100%; in the div with image
worked because the div with the image was the first div before the reset of the content div
You cannot have images repeat outside of the parent div size in such a way that is still cross-browser compatible as far as I know.
Related
I have a container that contains 2 divs a transparent background color that sits on top of the video tag, the video should be full screen width 100% (height does not matter)
For some reason the transparent div is overlapping the video container height slightly (on the bottom) as seen here:
http://jsfiddle.net/v3vLq0nv/
This does not happen for an image tag, note for this example I have used an embedded youtube iframe as it has the same problem as the tag.
If I set a height on the parent container then it works fine, but setting a fixed height for the parent container makes the video not full width anymore.
The only thing I found that does work is actually change the HTML5 declaration from:
<!DOCTYPE html>
to
<!DOCTYPE>
Which I guess means it's HTML5 anymore which is not a great solution.
Note doing this in jsfiddle will not make it work as jsfiddle itself will put the declaration back in the frame "!DOCTYPE html"
I think the best two options here are:
#videoContainer { height:150px; }
or
#videoContainer iframe { float:left; }
They will both solve your problem.
Add display:block; to iframe :)
I'm trying to edit a tumblr theme to make my posts centered inside of an image (the image is in a div) I've tried giving the posts and div the same margin in CSS but I can't seem to get the image inside the div to center correctly on the page. I want the posts to be perfectly centered horizontally inside the image even when the browser window is resized. Anybody know how i can do this? Is there an easier way than having the image in a div? here is a link to my code
http://pastebin.com/x6MP6EYQ
First of all i would recommend using image as a background image. Would be easy to handle it as it will not affect other things inside a div.
Second, if you were to use image you would position it absolutely which mean main div should be positioned relatively. Then once image has been positioned i.e. top:0; left:0; put z-index:-100; so that way it will be always behind.
To make div always be centered both horizontally, vertically and in both directions. See my example. Here:
http://jsfiddle.net/techsin/TfLTR/
try style=aligen:center;
just you can manage by style sheet tag like padding and margin also .
I have a trivial page with body having an image background, with background-size:cover. I set html { height:100% } to fill up the entire page regardless of the content amount. Up to this point everything worked as expected.
I've added a div and set position:absolute; right:0; width:200px; This, again, worked as expected, until I added content.
When this div is populated so much that the contents take up more space than the height of the page, the scroll bar appears. Scrolling down reveals that the background image does not actually cover the entire page.
This is due to the fact that my div is taller than 100% of the HTML height.
How can I address this?
You could add background-attachment:fixed; to your body element.
The caveat with this approach is that the background is now fixed in the viewport and does not scroll with the document.
https://developer.mozilla.org/en-US/docs/CSS/background-attachment
Do it like i did in this codepen, and it should work fine.
Update: (using some JS)
see this codepen for more complete solution.
Instead of positioning any items via position:absolute I utilized float as much as possible.
I also added a <div> wrapper to the entirety of contents inside of <body> this helps the proper formatting and stretches the containing <div> accordingly. The body tag and its background properties now behave properly!
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.