I am trying to add this 3D image as background to the content of a wordpress website
This is the theme demo I'm using
I would like the header part to stay the same size on all pages, the same goes for the footer. But as the body changes from page to page, I would like it to change accordingly but still fit properly to the header and footer part of the whole image.
The problem with this background is the fact that it not symmetrical, so the top & the bottom of the body image suppose to include the top & the bottom of the canvas (the middle part of the image)
I tried different techniques to implement this solution, but couldn't figure it out. The issue is that the body part of the image doesn't repeat-y so well, as it changes throughout the height of the image,
I would appreciate a solution, and it doesn't matter for me if I have to cut the images to a several parts.
Thanks
If you are lucky, you can do something with border-image.
This CSS, for instance,
body {
width:100%; height:100%;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
margin:0;
border-width:63px 40px 133px 40px;
border-style:solid;
border-color:brown;
border-image-source:url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
border-image-slice:189 120 399 120 fill;
}
sets the borders to a fixed width (in this case 1/3 of the width of the sides in the image) and distributes the rest of the image over the body background.
Then all you need to do is position the header and footer on top of the border of the body...
Fiddle.
Disclaimer: I've tested in Firefox and Chrome. MDN says it won't work on any other browser.
Related
I am using SiteBuilder to make my website marsya.com, and I inserted a code snippet into the header & body of my page (I didn't know where it should go so I put it in both places) that allows me to have a fixed background image. Hooray!
The problem is, while my navigation bar & location info are where I want them when I am zoomed at 100%, if the zoom or screen size are different my nav bar & the rest of that table row get lost in background image.
I would like them to either stay static are relative to the background (my first choice) or to just stay at the top of the page and not scroll along with the rest of my content (second choice) (I tried to post images of what I am describing, but I don't have enough reputation points)
Help! Oh, and in case you hadn't guessed by my use of SiteBuilder (and the fact that I don't know if the background image goes in the header or body), I am not a programmer. So, if you could make your advice as clear and 101 as possible, I'd appreciate it :)
marsya.com
To make an element not move along with rest of the page you need to add below styling to your .css file-
#ELEMENT-ID{
position:fixed;
}
If you look at this section below (I assume you added this code for the background image):
<style>
body
{
background-image:url('http://www.marsya.com/images/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
Change where it says:
background-position:center;
Change to
background-position:left top;
This will make the position fixed to the top left and the image won't resize when the browser is changed in size.
I'm trying to simulate something like iOS7 style, with frost blur background.
I have a image background on body and sidebar which should look like iOS7.
the problem is that I cannot match body and sidebar positions.
Also this sidebar will move up and down.
Here is a jsFiddle: http://jsfiddle.net/K9BCq/1/
problem is that I use background-size: cover on body and since sidebar is statically 200px wide, they will never match exactly
I just tried using this and it worked for me.
background-size:cover;
bacground-position:84%;
This will work but you have to manage the background position according to your sidebar position.
http://jsfiddle.net/K9BCq/2/
This is the problem
http://screencast.com/t/Dgfd5vTeEY
This is the site
http://eotomarketingsystems.com/
I have looked everywhere but the only method i got the background image to be full width. was by using the method here: CSS Tricks—Full Background Image,
but it was made background-image fixed which messed everything up. is there a simpler way to just make it reach that area after you scroll to the right?
Now Define min-width in your body css as like this
if your main wraper width is 980px;
than define your
body{
min-width:980px;
}
Take a look at http://jsfiddle.net/7zb6P/1/
Both the yellow box and the background image are centered in the scrolling div, although their center is slightly different. This seems to be due to the background being centered to the whole area (including scrollbar), but the div being centered to the content area (not including scrollbar) - see it centered correctly without the scrollbar http://jsfiddle.net/7zb6P/2/
Interestingly IE7 renders it "correctly", but IE8+ and other browsers render it as described above.
I have had a play around with background-origin (and -webkit-background-origin) but none of the properties seem to have any effect.
Any ideas on how to solve this?
EDIT: More information: The linked fiddle is just a minimal example of the problem, my actual problem is with whole sites where the is centered (with margin:0 auto) and has a background image centered (using background-position: center top). The solution needs to work on a large number of sites of which I cannot change the HTML, so it needs to be a CSS based (or possibly Javascript based) solution. Thanks.
The problem resides with your background image. You're trying to center an image that (for CSS's purposes) has no center.
The image is 321 pixels wide. Which means the center of the image is 161.5 pixels. As the browser is unable to render that position it gets a 1 pixel offset.
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.