Highlighted

Need background image to "scale to fit" and "tile vertically"

New Here ,
Jun 10, 2018

Copy link to clipboard

Copied

I am creating a web site with a background image that I need to scale to fit the browser width (responsively) and also tile vertically.  However when I choose tile vertically from the drop down the image is enlarged and looks horrible.  How can I have the background image do both?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

CSS does not allow scaled backgrounds to repeat.   Either your background image scales to fill the viewport in both directions or it does not scale.  

Example 1 -- Background-size: cover

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Full Size Background</title>

<style>

body {

    background: #000 url(https://placeimg.com/900/600/arch);

    background-size: cover;

}

.container {

    background: rgba(0,0,0,0.5);

    color: #FFF;

    width: 50%;

    margin: 0 auto;

    padding: 3%;

}

</style>

</head>

<body>

<div class="container">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>

</div>

</body>

</html>

Example 2 - Background-repeat: y

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Tiled Background</title>

<style>

body {

    background: #000 url(https://placeimg.com/900/600/arch) center center repeat-y; 

}

.container {

    background: rgba(0,0,0,0.5);

    color: #FFF;

    width: 50%;

    margin: 0 auto;

    padding: 3%;

}

</style>

</head>

<body>

<div class="container">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>

</div>

</body>

</html>

Views

226

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

Need background image to "scale to fit" and "tile vertically"

New Here ,
Jun 10, 2018

Copy link to clipboard

Copied

I am creating a web site with a background image that I need to scale to fit the browser width (responsively) and also tile vertically.  However when I choose tile vertically from the drop down the image is enlarged and looks horrible.  How can I have the background image do both?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

CSS does not allow scaled backgrounds to repeat.   Either your background image scales to fill the viewport in both directions or it does not scale.  

Example 1 -- Background-size: cover

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Full Size Background</title>

<style>

body {

    background: #000 url(https://placeimg.com/900/600/arch);

    background-size: cover;

}

.container {

    background: rgba(0,0,0,0.5);

    color: #FFF;

    width: 50%;

    margin: 0 auto;

    padding: 3%;

}

</style>

</head>

<body>

<div class="container">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>

</div>

</body>

</html>

Example 2 - Background-repeat: y

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Tiled Background</title>

<style>

body {

    background: #000 url(https://placeimg.com/900/600/arch) center center repeat-y; 

}

.container {

    background: rgba(0,0,0,0.5);

    color: #FFF;

    width: 50%;

    margin: 0 auto;

    padding: 3%;

}

</style>

</head>

<body>

<div class="container">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>

</div>

</body>

</html>

Views

227

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
Jun 10, 2018 0
Adobe Community Professional ,
Jun 10, 2018

Copy link to clipboard

Copied

CSS does not allow scaled backgrounds to repeat.   Either your background image scales to fill the viewport in both directions or it does not scale.  

Example 1 -- Background-size: cover

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Full Size Background</title>

<style>

body {

    background: #000 url(https://placeimg.com/900/600/arch);

    background-size: cover;

}

.container {

    background: rgba(0,0,0,0.5);

    color: #FFF;

    width: 50%;

    margin: 0 auto;

    padding: 3%;

}

</style>

</head>

<body>

<div class="container">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>

</div>

</body>

</html>

Example 2 - Background-repeat: y

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Tiled Background</title>

<style>

body {

    background: #000 url(https://placeimg.com/900/600/arch) center center repeat-y; 

}

.container {

    background: rgba(0,0,0,0.5);

    color: #FFF;

    width: 50%;

    margin: 0 auto;

    padding: 3%;

}

</style>

</head>

<body>

<div class="container">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quibusdam sunt, nisi voluptas, labore, impedit enim quo consequuntur nesciunt illum earum commodi quod inventore harum fugiat, error distinctio vitae vero.</p>

</div>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

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...
Jun 10, 2018 0
New Here ,
Jun 10, 2018

Copy link to clipboard

Copied

Ok that is what I was thinking..  I can scale the image in PS to be the right width.  This should then tile okay, but what happens when the width of the browser goes smaller than the image?  For example if the default width is 2000 px, what would the image to at 1500 px?

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...
Jun 10, 2018 0
Adobe Community Professional ,
Jun 10, 2018

Copy link to clipboard

Copied

Try it and see what happens .

Nancy O'Shea, ACP
Alt-Web.com

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...
Jun 10, 2018 0
Most Valuable Participant ,
Jun 10, 2018

Copy link to clipboard

Copied

if the design is in a breakpoint Muse will crop the image (jpeg by default) and use that... this is why a gif buggers up if its not set to non-resize

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...
Jun 10, 2018 0