Not Solved Help on changing logo and header.
#11
Not Solved
repeat
The background image will be repeated both vertically and horizontally. This is default
Play it »
repeat-x
The background image will be repeated only horizontally
Play it »
repeat-y
The background image will be repeated only vertically


You should use repeat-x if you want to repeat along the horizontal axis. Using repeat on its own still repeats on the y-axis.
What goes around comes around
Reply
#12
Not Solved
(2017-08-03, 12:21 AM)Ashley1 Wrote: repeat
The background image will be repeated both vertically and horizontally. This is default
Play it »
repeat-x
The background image will be repeated only horizontally
Play it »
repeat-y
The background image will be repeated only vertically


You should use repeat-x if you want to repeat along the horizontal axis. Using repeat on its own still repeats on the y-axis.

Thanks. That explanation makes sense as to how the attributes work.

I now did repeat-x, and it doesn't appear to be repeating at all.

Is there something in the wrapper div that's interfering?

Here's the screen shot.

[Image: pmELj4t.png]

.wrapper {
	width: 85%;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

#logo {

	padding: 10px 0;
	border-bottom: 1px solid #263c30;
        background-size: 100% 100%;
        background: url(images/hardwoodFloors.jpg) center center fixed;
        background-repeat: repeat-x;


}
Reply
#13
Not Solved
Try it like this first:

#logo {

    padding: 10px 0;
    border-bottom: 1px solid #263c30;
    background-image: url("images/hardwoodFloors.jpg");
    background-repeat: repeat-x;
}
What goes around comes around
Reply
#14
Not Solved
(2017-08-03, 04:33 AM)Ashley1 Wrote: Try it like this first:

#logo {

    padding: 10px 0;
    border-bottom: 1px solid #263c30;
    background-image: url("images/hardwoodFloors.jpg");
    background-repeat: repeat-x;
}

Thank you!  This is much better.

I guess the background size attribute was messing things up.

I also removed the padding as that was causing the left most image (the logo url) to drop below the others.

Here's the latest:

[Image: ZRiOAod.png]

#logo {
	padding: 0px 0px;
	border-bottom: 0px solid #fff;
        background-image: url("images/hardwoodFloors.jpg");
        background-repeat: repeat-x;

I also changed the margin so that the Portal, Search, Member List, Calendar, and Help links weren't half in the image, half with the white background.

Now they only have white background.

I changed the top margin from -10 to 2px.

#logo ul.top_links {
 font-weight: bold;
text-align: right;
margin: 2px 5px 0 0;
}

I think this looks good now.

(2017-08-03, 04:33 AM)Ashley1 Wrote: Try it like this first:

#logo {

    padding: 10px 0;
    border-bottom: 1px solid #263c30;
    background-image: url("images/hardwoodFloors.jpg");
    background-repeat: repeat-x;
}

Why was this causing so much trouble?


background-size: 100% 100%;
Reply
#15
Not Solved
Just wondering why the "background-size" attribute was causing so much trouble.

Why did I have to remove it?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)