Cannot associate color to background, the footer gets chopped off

Report · Jun 09, 2017

I'm fairly new to Dreamweaver and have built an index page with bootstrap and have two issues.

I cannot associate a colour to background - I have added an image but wanted to also add a colour so that on long pages it just goes on to colour rather than repeating image. No matter how I try I cannot get this to happen it just remains white once image passed.
The bottom of the page the footer area gets chopped off short. There is a background image in a fixed container at the foot of the page and only the top tip of the image show when previewing yet I can see full image in split view in dreamweaver.

I would appreciate if somebody can direct me to resolve these issues as I don't whish to publish it until it is correct.

Thanks in advance

Liz

Report · Jun 09, 2017

It is best to show your code, preferably by giving us the link to your site.

In its absence, have a look at this quick mock up. Paste the code in a new document and have a look at the result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>

<link href="css/bootstrap.css" rel="stylesheet">



<style>
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
background: #807171 url('http://lorempixel.com/output/abstract-q-c-1920-530-6.jpg') top center no-repeat;
color: white;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h2>Some Heading</h2>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem asperiores saepe consequuntur sequi quo, tenetur reprehenderit. Temporibus tempore, perspiciatis quos obcaecati harum cum saepe in! Ullam error nemo, possimus recusandae!</span>
<span>Ex, odio aperiam sed placeat, nam quaerat explicabo fuga sunt reprehenderit, enim optio itaque. Nobis at hic expedita debitis ad, suscipit sunt aperiam consectetur quod ut. Laborum a placeat nobis.</span>
<span>Sapiente inventore odit obcaecati, odio, debitis rerum necessitatibus ipsum quaerat eveniet, est natus voluptate at impedit laudantium ratione, deleniti unde praesentium libero accusamus eius sit nam voluptas. Nemo, provident, eos.</span>
<span>Nam placeat quisquam ratione pariatur consequatur consequuntur velit tenetur non sit ea, quaerat alias dolorem magnam enim ullam similique totam repellat temporibus quibusdam, inventore a vero blanditiis. Exercitationem, itaque, deleniti!</span>
<span>Iure, vel. Dolorem, minima provident iure dignissimos enim expedita numquam pariatur voluptatum doloremque, saepe suscipit quasi similique velit modi nisi nam itaque quidem consectetur quos perspiciatis architecto reiciendis in! Natus.</span>
<span>Possimus nisi quaerat non cum quis ipsam maiores consequuntur, blanditiis aut, similique doloribus, alias eius ad libero delectus officia quas quasi. Eligendi ad alias inventore. Adipisci fugit quidem sint nihil.</span>
<span>Iste culpa consectetur, quam perspiciatis sequi cumque inventore praesentium rem quos architecto, numquam officia amet recusandae ipsa qui pariatur tempora animi repudiandae corrupti omnis voluptatibus voluptatum. A cum, doloribus recusandae.</span>
<span>Cupiditate delectus doloribus, perspiciatis veritatis unde provident quam possimus saepe ipsam quae laudantium ipsa minima, et. Unde culpa doloremque necessitatibus ipsam odit enim sit eveniet nam explicabo, laboriosam, beatae impedit.</span>
<span>Incidunt veniam laboriosam reprehenderit recusandae, ratione cum molestias laborum. Similique temporibus vitae tempora ab nam, nostrum qui quidem reprehenderit, quisquam nihil. Aut perspiciatis inventore ea doloremque nobis voluptate a voluptates.</span>
<span>Possimus doloremque cumque maxime saepe, facilis libero. Voluptatum quos dolore laboriosam dolorum, temporibus doloremque aspernatur molestias repellat saepe natus quae dolorem, commodi totam asperiores placeat explicabo. Laudantium tempore obcaecati neque.</span>
</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/bootstrap.js"></script>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jun 09, 2017

Hi this is the code for the page:-

<!DOCTYPE html>

body {

background-repeat: no-repeat;

}

a:link {

color: #B265FF;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #9D7E48;

}

a:hover {

text-decoration: none;

color: #9800CB;

}

a:active {

text-decoration: none;

}

</style>

<head>

<title>AD Design & Print|Overview Derbyshire Based Services</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

</div>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</form>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Corporate</a></li>

<li><a href="#">Everything Web</a></li>

<li><a href="#">Self-Publishing</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Celebration Stationery<span class="caret"></span></a>

<li><a href="#">Wedding Stationery Items</a></li>

<li><a href="#">Wording Options</a></li>

<li><a href="#">Make Your Choices</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

<p class="text-justify">AD Design & Print was born in 1999. The driving force to its creation was small businesses wanting short print runs of a wide variety of print products and personal customers wanting unique creations, designed especially for them. The attributes that are associated with AD Design & Print are to provide excellent caring personal service, to be available at times convenient to the customer and to produce high quality items from superior quality materials at a price within the customers’ budget. These points bring our customers back through the decades from Weddings, through Christenings on to Anniversaries, we can even help at your sad times when you lose close family members. As you are travelling the path of life we can also assist with your Corporate Events, Charity balls, Fundraising Events – There is no occasion we cannot help with – Don’t be shy contact us.</p>

</div>

<p class="text-center">Handmade Celebration Stationery</p>

</div>

<p class="text-center">Corporate Stationery & Advertising Media</p>

</div>

<p class="text-center">Web Design, Build & Host</p>

</div>

<p class="text-justify">We highly recommend you surf the site, browsing everything we have to offer. Order a sample, this way you get to feel the quality in all its glory. Even if you want a bespoke design order a sample of any design to assure yourself of what quality and attention to detail you will receive for your design – we will still deduct the cost of the sample from bespoke orders. </p><p class="text-justify">Consider us an extension to your workforce or family, we are that extra pair of hands as and when you need us.</p>

</div>

</div>

</div>

var today = new Date()

var year = today.getFullYear()

document.write(year)

</script> AD Design & Print<br>Designed & Developed by <a href="http://www.addesignandprint.co.uk" title="AD Design & Print" target="_blank">AD Design & Print</a> 01332 882022

</div>

</body>

</html>

Then there is the bootstrap css sheet and also an additional css sheet which is as follows:-

@charset "utf-8";

.header-image {

background-color: #FFFFFF;

}

.band-hero {

background-color: #FFFFFF;

padding-top: 50px;

padding-bottom: 50px;

}

.band-services {

background-color: EDE3F1;

padding-top: 50px;

padding-bottom: 50px;

}

.band-services {

}

.band-continuation {

background-color: #FFFFFF;

padding-top: 50px;

padding-bottom: 50px;

}

.band-footer {

background-color: #EDE3F1;

background-size: cover;

}

.navbar-default {

background-color: rgba(178,101,255,0.83);

border-color: #9800CB;

}

.navbar-default .navbar-text {

color: #EDE3F1;

}

.navbar-default .navbar-nav > li > a {

color: #EDE3F1;

}

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus {

color: #9800CB;

background-color: #EDE3F1;

}

Does this help. As I say I haven't loaded the page yet until I have it all as I would like.

Report · Jun 09, 2017

Also if I just do a coloured background to the footer container it seems to appear it is only when I put the background image in the container you only got top couple of mm to view. I have tried using several different versions of the image I want to use with different names and same thing happens. I have also removed the container and saved then put a new container back in and it still happens!

Report · Jun 09, 2017

If you could upload your work to a TEST folder on your server and post the link here, it would be more helpful.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2017

Good idea wasn't thinking of that!

Here you are:-

http://addesignandprint.co.uk/Test/index.html http://addesignandprint.co.uk/Test/index.html

If you look at the bottom you can see tip of image. The image should be:-

You can only see my background issue if you shrink the screen size and scroll. I do know I have media queries to put in but not got that far till I have these two issues sorted.

Thanks

Liz

Report · Jun 09, 2017

OK, thanks. Try this

html {

height:100%;

background: url(images/ADBackgroundNew.png) no-repeat center center;

background-size:cover;

}

Now the entire screen is filled with your main background image.

Before:

After:

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2017

I am somewhat confused as in IE, Edge and Chrome the background image does go from side to side I don't get the blank down one side like in your screen shot - I'm working on a 17" laptop are you on larger screen? But if you notice your coding has not helped the footer issue as now in your second shot entitled 'after' the footer background image has totally disappeared and you only have the colour fill container so instead of a little bit of image at the bottom of the page you have got nothing - not what I'm trying to achieve!

Report · Jun 09, 2017

A likely better option would be to also change the cover setting to 100% 100%...

.band-footer {

background-color: #EDE3F1;

background-size: 100% 100%;

padding-bottom: 2em;

}

It will distort the wave slightly, but it will always fill the available space, no matter what the content does, unlike the cover setting.

Report · Jun 09, 2017

I have tried these settings and I get the wave back but now the copyright etc appears too high!!!

Report · Jun 09, 2017

You might want to create an SVG for your footer.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2017

The problem is your element's height isn't tall enough to fit the entire image. Online, you want the content of the element to determine the height. When you set absolute heights, you can run into other problems. In this situation, you have a little more room to work with. It might be worthwhile stretching your element vertically by adding padding to both the top and bottom of it.

That would have the effect of centering the content vertically in a taller element. You could try setting the padding for the top and bottom of the .band-footer. Something like...

padding:1.5em 0;

...that would add the same padding above and below whatever content is in the element.

If you really want the copyright to be at the very bottom of your page, without space under it, use padding-top instead of padding-bottom from my first post. That will increase the height of the .band-footer element without moving the text off the bottom of it.

Report · Jun 09, 2017

Thanks guys for your suggestions but I've decided to go without the wave at the bottom as its just not jelling.

Now can anybody answer my other problem how I get a background colour to the body so that when the image is scrolled past as the page becomes longer it will become the solid colour rather than solid white?

Report · Jun 09, 2017

I thought I already answered that question in reply #6.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2017

I understood you to tell me how to stretch image but not how to add a colour so colour can take over

Report · Jun 10, 2017

I really don't like the cover option it stretches the image too much. I would like the image to be centralised and at the top and then on wider screens like the image above there would be a band of colour down each side and once scrolled off the image cause of page length the colour to take over at the bottom is this possible?

If you view my blog I want the website to replicate the look of the layout:-

http://addesignandprint.blogspot.co.uk/

Hope somebody can help me achieve this.

Liz

Report · Jun 10, 2017

OK. So you want it to look like this? Incidentally, your Blogger Template is fixed width.

html {

background: #9d7e48 url(YOUR_BACKGROUND_IMAGE.jpg) no-repeat top center;}

body {width: 40%; margin:0 auto}

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 10, 2017

Could you please check http://addesignandprint.co.uk/Test/index.html and see if I've achieved this as I haven't got anyway of checking if the image is now central with coloured background either side on anything bigger than my laptop.

Report · Jun 10, 2017

You're not following my instructions. So it does not work.

You need to put the CSS background on the html selector, not the body selector.

BTW, open your page in Chrome. Open Tools. Adjust Zoom setting to 25% or hit Ctrl+minus key 3 or more times to zoom out.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 10, 2017

Thanks for your help but I;m missing what you are saying and not understanding, I don't understand what you mean by HTML selector as the coding has been added to html index page document. I dont have an html selector. Sorry I'm missing what you trying to tell me but I am very new to Bootstrap and quite new to Dreamweaver.

I have tried your trick on Chrome and the background is looking exactly as I wanted but when I zoom out the centre page holding the information shrinks too as I would assume it would

Report · Jun 10, 2017

I have copied and pasted your code in exactly and it is not working correctly. This is what I get.

With the code as I'd put it produces this:-

Report · Jun 10, 2017

Looks to me like you're quite new to web design too because the html selector is nothing new. It's at the very top of every HTML page. It's the parent of the <body> tag.

If you put the background on your html selector and not the body selector, it works.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2017

Your main background image is not big enough to fill larger viewports. The CSS background-size: cover property takes care of that deficiency for you.

You must check your work on multiple devices, screen sizes and browsers. Your 17" laptop display is not going to tell you everything you need to know as many people have very large or very small high density displays now. That's what makes RWD so challenging.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2017

CSS background-images start in the top left corner of the element they are added to. Since the height of your .band-footer element isn't tall enough to show the whole image, it gets cut off.

You could force the issue by adding padding-bottom to the css of that element...

.band-footer {

background-color: #EDE3F1;

background-size: cover;

padding-bottom: 2em;

}

...which would increase the overall height of the .band-footer element and show more of the background image in it.

Cannot associate color to background, the footer gets chopped off

1 Correct answer