Subscribe or Login to watch video

Login or Subscribe to watch video

35 - How to create a CSS background image in Dreamweaver


Questions & Comments

elisabeth breutner - 1 year ago

Hi guys, first of all thanks for a creating a super tutorial, which I followed along and now created my first website :) I have one question regarding the background image: I used a container-fluid, so on the really big screens (e.g. 28 inch) you'll only see the top of the image which unfortunately isn't so interesting. Is there a fix for that? You can check out my page here: http://www.lamaco.at/index.html

Thanks very much for your help :)

Cheers, Elisabeth

elisabeth breutner - 1 year ago

Hi, any thoughts on this?

Thanks, Elisabeth

Administrator Tayla Coman - 1 year ago

Hi Elisabeth, try changing your image class to this:
.image {
background-image: url(images/DSC_4999.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 780px;
}

elisabeth breutner - 1 year ago

Hi Tayla, thanks for your reply, unfortunately, this didn't work out. The background image still doesn't center correctly (see picture).

Administrator Tayla Coman - 1 year ago

Hi Elisabeth, can you just make sure you've correctly added the suggested code and that it's actually applying because as you can see in my screenshot - it does solve the issue. If you right click the image on your site and select 'inspect element' and then check the styles that are being applied to the 'image' class - is it correct? I have a feeling something might be broken in your styles.

Administrator Tayla Coman - 1 year ago

I suppose the issue could also be that youre using IE/Edge which doesn't support many new things. You might have to do some research into which style isn't supported. have a look at https://caniuse.com

elisabeth breutner - 1 year ago

This is how I'd like it to look like also on the big screens.
Thanks!
Elisabeth

elisabeth breutner - 1 year ago

Hi Tayla, you were right, the style was applied to the wrong image class and I could fix it - thanks!

Administrator Tayla Coman - 1 year ago

Good to hear Elisabeth! It's always those little things that we look over unfortunately. Glad you fixed it, well done.

Andrew Conrady - 11 months ago

I inserted this image to use as a background image in order to keep it centered. There is this side padding on each side of the image that I cannot get to go away I have made them red in order for you to see them better. I have looked at the container padding as well as the bootstrap padding and neither seem to have any affect.

Administrator Tayla Coman - 11 months ago

It's hard to diagnose with just that screenshot but I'm guessing it could be any of the parent or child elements that has padding that could create that, not necessarily the div with the background image.

Does the div with the background image have a parent container that has padding?

Andrew Conrady - 11 months ago

Yes this solved the problem. The parent container had a padding on it.

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi, my name is Dan. In this video we're going to look at background images. Now, there are two ways to add images to Dreamweaver. One is the way we've done earlier, where we just had our cursor in the right place, and we add it, and an image ends up sitting in our HTML. If I click on this guy here, and go to 'Source Code', you can see him here, he is inside this column here, and he's an actual thing here, he's called graphic-old-books.jpg, he's got some alt text. Remember, alt text is so that the visually impaired can see and read, or at least be read what's on the page. And that's great for our website, and great for Google. Google loves it.

Now there's another way of adding images, it's background images. It has a slightly different effect, and isn't great for browsers in terms of Screen Readers. So let's have a look at that. I'll go back to 'Live' view. We're going to do it to this gray box at the background here, of our 'band-hero'. So in the Photoshop file, you can see here, this nice big image in the background I want to use. To do it, I can't put an image on an input text over the top of it, it's a really big pain in codes. So what the easy thing to do, is to find our 'band-hero' in css. What we're going to do is, we're going to go down to background. And background color, we're going to leave that, doesn't need to go, but we're going to use this one called background image. I'll click on 'url', and we'll click the little 'Browse' button. Click it again, 'Browse' button again. And I'm going to scroll up to my 'Desktop', go to 'Dreamweaver Exercise Files', go to 'Images', and there's a background in here, a building. Here he is there, nice big one.

I've made this in my Photoshop training course. If you want to go out and make graphics like this, where we blurred it, added some noise, that's done in a separate course. So check out my Photoshop for Web Design course.

So we've created it, let's click 'Open'. It's gone in the background here, let's see it in the browser. At the moment, it's at full size, and sits in the background there. And that's fine, you can totally leave it like that. Problem is, go down to a mobile and you can barely make out what is in the background. So what we're going to do is use a nice little option in css. That's called 'Size'. We're going to change it to 'Cover'. It's 'Set to Auto', fully puts it in there. We're going to set it to 'Cover'. What that does is that-- watch the background when I readjust these sides. So if I make it smaller, it adjusts depending on the size. What Cover does, it tries to fit the height or the width whichever goes first. So if I check out in my browser, it's using the width in this case, stretching it out, but it gets smaller until there's none of height, and then will leave it locked in there. So it will just stretch itself, so it makes sure it's 100% covering the background. It works really well with background images.

Now the trouble of using this I guess, rather than just putting it in as an object is that-- if I look at my HTML, so I've clicked on 'band-hero' and I go to 'code-view', there's band-hero, no mention of image in here. So for the people that are using a Screen Reader, they're not going to actually ever see this image because it's introduced in css, which was a separate file over here. If I find band-hero in here, he's introduced over here. There's no alt text for it, and the Screen Reader doesn't say it. So this is an extra file here that gets ignored by Screen Readers. So if you need images that need to be part of your website and read out, and be searched by search engines, it needs to be an actual physical object. As for background image, there's no real reason for them to be read out exactly what the background image looks like. It's just their Style Points.

So that's how to set a background image in Dreamweaver. Now make sure, I'm not going to do that on the video again, go and backup your website. See you in the next one.

ALL ACCESS: $12 per Month + Cancel anytime