Help with Web Coding - HTML and CSS?

I have searched and searched and I’m not finding what I’m looking for. I don’t even really know what to search for as “repeating background image containing text” “dynamically repeating background” … are apparently too simple of terms.

I can explain what I want to achieve. the webpage has just a solid color background set, a NavBar that I’ve setup, and a dynamic container that has all the page’s content.

Showing how the images are separated

So I have a three images I have made. I have a header, body, and footer image. I want the header image to start at the top of the page’s content, under the NavBar. The “body” image (in the first image, highlighted in blue), I want to dynamically repeat, going down the page (repeat-y?) for as many times as necessary to contain all the page’s info. and the “footer” image to cap off the end of that page’s content and end the repeat of the “body” image.

How I want it to repeat

I want this section these three images make up to hold the contents of each page and dynamically change length (by repeating the “body”-image) to fit each new page. Please tell me I’m not crazy, and that this is possible?? I’ve been struggling for days now. Trying different pieces of code, watching videos, learning CSS and relearning HTML… I feel so lost :frowning:

How I would like for the end product to look

I know that header, body, and footer may be bad terms as they describe other things… But I haven’t done web page editing for quite some time. Please forgive me.

Thank you in advance for your time.
Clay.

I’ve got this so far

have you considered/tried adobe dreamweaver cs6 for coding purposes?

That’s what I’m using… not cs6, though… why do you recommend that version?

1 Like

newest version. more features and options vs cs4 or 5 or even 5.5 ; check it out if you may, you’ll be glad that you did.

this will help too Clay,

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
background-image: url(“gradient_bg.png”);
}

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}

Tip: To repeat an image vertically, set background-repeat: repeat-y;


CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

Show the background image only once:

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
}

In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.


CSS background-position

The background-position property is used to specify the position of the background image.

Example

Position the background image in the top-right corner:

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}


The CSS Background Repeat and Position Properties

Property Description
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

@ClayPonder

I would say a fault in the design itself

I don’t know why the menu is made of a table
and then in it images that then swap depending on the hover
it is neither efficient (unnecessary REQs) nor behaves equally on different devices

it is totally unnecessary to use tables and images
especially since your menu contains plain text (of a certain font)

you should have done all that with the help of CSS

CSS can also create that reflection (horizontal light that can be seen on your menu) if that is perhaps the reason why you used images


Here I made you something

index.html (2.9 KB)


I don’t know what font you use, but I found a similar one
I even added a light effect to the menu
as well as shadows on both txt and “windows”
it mostly looks a lot like this picture on the right

and it always keeps the menu in the middle of the screen
and has a mobile menu for resolutions lower than 950px horizontally
the menu does not use images (it is faster and fewer REQs to the server)

and you finish all that according to your wishes

6 Likes

:open_mouth:
Oxy.
Wow!

You’re amazing. It was definitely a fault in the design - I have absolutely no idea what I’m doing. Last I ever worked with html period was in the 7th grade when I made myspace DIV layouts for my classmates. And even then I was cheating a lot with photoshop using slices or coordinates for links…

Half of my code up there (for the nav bar) was photoshopped images I was using. I’m assuming I can play with the code to get similar colors for the “hover” style. I’m going to pick apart what you made me and see what all I can learn. I had NO IDEA CSS was SO flexible! you did all of that with just code huh? That blows me away.

Thank you SO MUCH. You did what has taken me days of research like it was nothing.

Thank you thank you thank you
Clay

1 Like

Thank you Mighty for the info and resources. I thought CS6 is what I was using almost 15 years ago. I’m currently using DreamWeaver 21, released last year. It was the newest version I could get my hands on.

Oxy sent me an awesome example they whipped up like it was nothing… Smh. Made me feel silly :roll_eyes: :slight_smile:

I really appreciate y’all coming to my aid.

2 Likes

When you use images for the menu and in general especially with tables over all that
then the problem is that different devices (resolutions) display it differently,
and there is always a struggle between appearance and functionality (you quickly felt the latter).

You can design a beautiful chair, but what’s the point of all that if you can’t sit on it - right?

So you always have to choose a compromise between these two worlds
appearance vs functionality

you find this and change it to green color like here

#menu li a:hover {
	color: #9ECC1F;
	background: #000000;
}

it’s even more important that it’s all only 3KB - probably the whole website is smaller than one of your imgs for some menu item :upside_down_face: (means 12REQs less - faster loading)

Yes I wrote all that based on your picture
and I used the links you provided in pastebin

But I didn’t do a finished website
but only to help you to some extent and direct you a little toward the goal

Instead of 950px when the mobile menu appears
it would be better to make a few more @media
and also use scale (a value starting with 0.something) and reduce the menu size with that
so that the entire menu is visible - just smaller (scaled down)

And then only somewhere on @media 450px display the mobile menu that is now displayed (on 950) when you grab the right edge of the browser and reduce its horizontal size to the left

instead of above, you can reduce the font size
here is a simpler example
looks at the source

index.html (3.1 KB)

it is important for you that all elements fit and do not fall out

this is how it looks when the font is reduced

and then you additionally edit the spacing between elements (padding. etc.) depending on the @media resolution
so you get even more space, so the font-size can be bigger


I otherwise use the browser (Firefox) to select colors, etc.

But you can start with this

5 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.