Highlighted

Multiple backgrounds (only want certain ones repeating)

New Here ,
Apr 28, 2020

Copy link to clipboard

Copied

Hello ,
Can anyone send a line or two to please help me with this? Using an older version of Dreamweaver, I have apage where I have a main background, and others throughout the page. I have tried the common "background-repeat: no-repeat" html code, CSS ideas, and other things, but nothing works.

It seems that the way in which the code is written, when the main background image is set to repeat, makes all the others repeat. Is the problem there then - should I change that code in the beginning part of the body code?

Thank you kindly in advance. Hope everyone is safe and healthy!

Views

746

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Multiple backgrounds (only want certain ones repeating)

New Here ,
Apr 28, 2020

Copy link to clipboard

Copied

Hello ,
Can anyone send a line or two to please help me with this? Using an older version of Dreamweaver, I have apage where I have a main background, and others throughout the page. I have tried the common "background-repeat: no-repeat" html code, CSS ideas, and other things, but nothing works.

It seems that the way in which the code is written, when the main background image is set to repeat, makes all the others repeat. Is the problem there then - should I change that code in the beginning part of the body code?

Thank you kindly in advance. Hope everyone is safe and healthy!

Views

747

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 28, 2020 0
LEGEND ,
Apr 28, 2020

Copy link to clipboard

Copied

Not certain what you are trying to do?

 

If it is having different background images for various sections, then you should attatch a background image to each section.

e.g.

article {

backround-image: xyz.png;

}

p {

background-image: xxy.png;

}

 

If it is multiple background images for the same section, (e.g the body) then you use multiple background-images, seperated by commas, and the other properties should also be comma seperated.

 

See - 

/Using_multiple_backgrounds 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 28, 2020 0
New Here ,
Apr 28, 2020

Copy link to clipboard

Copied

Thank you for the response. Specifically, I have a main background (for the entire page), and others used within tables and layers. The main one and two others, I would like to have repeating, and the others non-repeating.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 28, 2020 0
Adobe Community Professional ,
Apr 28, 2020

Copy link to clipboard

Copied

Simple. Use the background repeat and no-repeat properties.  See screenshot and code below.

 

image.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Background Repeat / No-repeat</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background:#fff url(https://placeimg.com/100/200/people) top center repeat;
}
div {
width:45%;
margin: 0 auto;
padding:3%;
color:#FFF;
background:#333 url(https://placeimg.com/400/200/arch) center center no-repeat;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ea non recusandae, facilis. Sunt debitis expedita minus sapiente animi omnis odio quod nostrum. Nisi ipsum, accusantium expedita alias. Assumenda, aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ea non recusandae, facilis. Sunt debitis expedita minus sapiente animi omnis odio quod nostrum. Nisi ipsum, accusantium expedita alias. Assumenda, aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ea non recusandae, facilis. Sunt debitis expedita minus sapiente animi omnis odio quod nostrum. Nisi ipsum, accusantium expedita alias. Assumenda, aliquam.</p>
</div>
</body>
</html>

 

Post back if you have any questions.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 28, 2020 1
New Here ,
Apr 29, 2020

Copy link to clipboard

Copied

Thank you kindly for your help! I figured it out my noticing where to place the mentioned "no repeat" code, after related the background jpg code:

background="images/all images/background 3.jpg" style="background-repeat:no-repeat;">

Cheers!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 29, 2020 0
Adobe Community Professional ,
Apr 30, 2020

Copy link to clipboard

Copied

This is invalid code.

background="images/all images/background 3.jpg"

 

Validate your code often and fix reported errors.

Window > Results > Validation.

 

Or go directly to the W3C's online validation service.

https://validator.w3.org/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 30, 2020 0