Fixed background image with scrolling text

wordpress

#1

I would like to make a very simple webpage. I don’t want multiple columns or parallax scrolling.

The desktop site would have a header, a fixed background image, and a footer. The header would have about 6 page titles. When you click on a page title, that page’s content would scroll over the background image in the center section. The footer would have legal/copyright info, etc.

The mobile site would have a slide out menu with the same 6 pages listed. When you click on a page title, that page’s content would scroll over the background image in the center section. The footer would have legal/copyright info, etc.

Is this something I can do with WordPress? If so, how? If not, what can I use to make this site? I have a good hosting package on DreamHost, and already own the domain name.

Thanks!


#2

Yes, with the correct theme and possibly a plugin or two.

However, you can achieve this in nearly any CMS or even coding by hand if you have the appropriate HTML, CSS, and JavaScript skills. What is your skill level with these technologies?


#3

This would actually be my preferred way to do it, but I am not sure if I’ve got the skills I need. I can hand code old school HTML and CSS, but have not updated my skills in many years. I do not know anything about JavaScript.


#4

So I decided that hand coding is the way to go, and I found the code I need to do this:

body { background-image: url("Ava429.jpg"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; }

Now I need to resize the images for a responsive website. How many different versions should I make of each image? What size should each image be (in pixels)? How big should each file be? What tool should I use to resize them?

The original images I am working with are 2400 by 3600 portraits and 3600 by 2400 landscapes. They are saved as TIFFs and are 50 MB each. I would like my site to be viewable on smartphones, tablets, laptops/standard desktops, and also large screen desktops.


#5

You can make your images whatever size you want. Just target that size in your media query. (Yep, CSS media queries are going to be your good friend.)

For example, if you’re targeting a device that’s 1000px or less in width, use images that are 1000px or less in width. There are no hard and fast rules here, you have to do a bit of research and testing.

Be sure to save your images as .jpg if they are photographs, or .png if they are some other kind of image. (Icons, for instance.)

Unless your css is very short and simple, you are definitely better off putting it in an external file. That way you take advantage of caching and can reduce the size of the files your users have to download.


#6

I’m not sure how to put the code for pictures into my style sheet. Wouldn’t that mean that all pages of the site would have the same background picture? Of course, after typing that out, I realize that might not be such a bad thing. Thinking it through further, I’m not sure if this site even needs multiple pages.

The majority of page views are going to be from phones and tablets. Extra photos will just take extra time to load. Instead of making people click 5-6 times to get the info they need, there could be no menu, just a small header at the top with the site name and tagline, a center section with the fixed background photo and all the information scrolling over the picture, and a small footer with legal/copyright info.

Ugh, I guess I need to go back to the drawing board on this one!


#7

[quote]The majority of page views are going to be from phones and tablets. Extra photos will just take extra time to load. Instead of making people click 5-6 times to get the info they need, there could be no menu, just a small header at the top with the site name and tagline, a center section with the fixed background photo and all the information scrolling over the picture, and a small footer with legal/copyright info.
[/quote]

That is a valid point.

However, you still need to take bandwidth considerations into account. Most phones have less bandwidth than connected connections, hence your site will be slower to load. A large background image will slow it down even more. You can use the CSS you have above to place an image into your background image, but you need to use media queries to load a style sheet for that particular size screen.

You will end up with multiple stylesheets. One that loads large background images for desktop computers, another that loads medium size background images for tablets, and another that loads small images for phones. Your media query determines which stylesheet actually gets loaded.


#8

OK, I had to take a break from this project. I’m back on it now and snagged on something else. I decided not to worry about making the site responsive from the start. I can just code for mobile first and then add media queries in later to deal with desktops and laptops.

So here’s my css:

  • {
    box-sizing: border-box;
    }
    .row::after {
    content: “”;
    clear: both;
    display: table;
    }

html {
background-image: url(“Ava429c600.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
p {

width: 100%;
}

H1 {
font-family: ‘Playfair Display SC’;
font-size: 40px;
margin: 0px;
padding: 0px;
}

H2 {
font-family: ‘Playfair Display SC’;
font-size: 22px;
margin: 0px;
}

/************************* ID’s *************************/

#header {

width: auto;
float: center;
background-color:rgba(0,0,0,0.5);
color: #ffffff;
padding: 0px 15px 0px;
margin: 0px;

}

#content {

width: 100%;
float: left;
background-color:rgba(255,255,255,0.5);
padding: 0px 15px 0px;
margin: 15px 0px 0px;
}

#footer {

width: 100%;
float: center;
background-color:rgba(0,0,0,0.75);
color: #ffffff;
padding: 0px;
margin: 0px;
font-size: 6px;

}

Now the background image is perfect. It sits right where it is supposed to sit and does not scroll.
The header and the footer, however, are giving me trouble. The background colors start a few pixels from the edge. Why? I want them to span the entire width of the page. Shouldn’t
width: 100%;
padding: 0px;
margin: 0px;
make this happen?


#9

THANKS FOR YOUR KNOWLEDGE