I am trying to add the following image as background to the content of a website:
http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg
http://webbos.co/vibration/
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.
I tried different techniques to implement this solution, but couldn't figure it out.
The issue is that the body part of the image doesnt repeat-y so well, as it changes throughout the height of the image,
I would appreciate a solution, and it doesnt matter for me if i have to cut the images to 2 or 3 parts.
Thank you
if you are doing it in php den create different header.php and footer.php and with the background you want and use this code for each page.
<body>
<?php include 'header.php';?>
<your middle content>
<?php include 'footer.php';?>
</body>
follow this code for each page...
for header and footer background css you may have to use background-repeat:no-repeat
and for body background-repeat:x or y
Related
So I basically have the exact same code as this code pen i found (with different images but same css and html), but what im not being able to do is add the rest of my page under that parallax effect
I have a normal page with the following structure:
<section class="position-relative bg-blah-blah">
<divs>
</divs>
</section>
.
.
.
<section class="position-relative bg-blah-blah">
<divs>
</divs>
</section>
So where should i put the rest of my page after that parallax code so that the parallax hides under my first section and the rest of the pag follows
Im sorry if this is not the correct way to make a question, its my first time
with the same CSS you can't put the flow of the page right behind it because the CSS is aligned to display absolute. So it doesn't matter where you put your own code the first 2000px will disappear behind the cover. You could start to adjust the CSS and change from display absolute to display relative e.g. the class "parallax". But your problem here is not the HTML flow but the CSS.
I`m doing a (very) simple website for college but I got stuck. The idea is just have an image as body and an Iframe on header (we are not using html 5). It will have first, info and contact page that are gonna use the same header and footer
Until now I did it fine, things are working well with the header but I'm not getting to add the footer after the image, the content is always doing in the middle of the photo, I`m trying it in many different ways.
PS: Each page has a different photo with the same size in the body background.
The footer must be placed immediately after the image, with the same width (912px).
Thank you!
I want the homepage of my webpage to have a fixed background image in between the navbar and footer with a smaller carousel box in front of the background image. I've looked around and haven't found anything that looks like this. I kind of don't know where to start. Is it possible?
The tag that contains your entire main content add a CSS background to it
Below navbar
Till footer
background:url(link);
Then use your slider as you would normally
I have a page with 3 basic elements. You have your main content which runs down the center of the page at about 80% and has a white background. On the side of that main content you have the left and the right side at 10% each which for design reasons is grey. So far So good. Now I have my footer which as of recently was contained as a sticky footer and remained at the bottom of the page. I want the footer to be at 100% width and sit right under the content and if the page is being viewed on a screen that is too large then have the footer fill the rest of the page with white.
<p> I've tried everything that i know with the CSS I think I'm just missing something simple. I have to put some code in here to link to a fiddle </p>
Here is a link to the fiddle:
http://jsfiddle.net/dPek3/
You fake it by making your body background color the same color as your footer. You usually have to have a wrapper that contains your content to overlap this change, but it is extremely effective and I would recommend it. You also need to clear your floats. Here is a working example: http://jsfiddle.net/dPek3/1/
I am trying to create one advert that use both empty sides of the website content. So i add the advert image as a background on BODY tag. look nice. But the problem is to add a link to it. I start with onclick att on body, but them all site content become clickable. Also i try to use different z-index for body and the content div. Don;t work as well.
This the website i take the idea from. I just want to do some thing similar.
http://www.sport.co.uk/
Any help are welcome.
I would forget about the body background and use 3 div columns.
Other possibility would be to use absolute positioning in css and for new browsers you can make the div to stay on its position and not to scroll.