HomeХобби и стильRelated VideosMore From: Ralph Phillips

Background Image CSS Properties: Repeat, Size, Position

245 ratings | 72550 views
Use CSS properties to have more control about how background images are used.
Html code for embedding videos on your blog
Text Comments (24)
Tosin Ajayi (9 months ago)
nice tutorial but they were some old syntax and declaration on this video which is no longer relevant in 2018.
Persteige shots (5 months ago)
Tosin Ajayi hey, I'm working on thing for a friend and I can't find out how to add in a image Since most methods I find online are old now. Would you mind giving me a hand?
border-radious ? possible ?
CHARLES NWOSU (1 year ago)
Why is your coding done in same html script? tried this on separate css script linked to html and it did not work, pls could you upload a tutorial that shows you doing this same great work on an actual css script, that is linked to html?
Hotboytrue (1 year ago)
how do I make the image full. I have a image but its like tiles. little squares of the same image over and over in the background of the body
Indranil Jana (2 years ago)
dear sir its very helpfull if u show a background image as a devider means border of many style.............. suppose <style> .devider { background-image: url("../IMAGES/br1.png"); background-size: 100% 1px; height: 1px; margin-top: 10px; } </style> html <div class="devider"></div> </div>
Practice Repeat (2 years ago)
1em = 16px
Peter Gakinya (3 years ago)
nice tutorial Ralp
good work man 
Harold Jackson (4 years ago)
This is great. But I only use HTML. Not CSS or HTML 5. So most of what I see is not going to work for me. All of my website are "HTML". Can you tell me how to do this with HTML?
SilverHunterN (4 years ago)
Hi. I've made quite a few websites and for some reason half the time the background-images I load work and half the time it doesn't. For this site I'm making for someone, the images I load like facebook and twitter icons only load when I DONT use no-repeat, otherwise it won't load. I can't leave a big trail of images in a line, so how do i fix it? Heres the code: .pageBottom li.fb{background-image: url(../images/icon_fb.png) ; padding-left:27px;} ^This generates a line of fb icon images across a div, but I want to only show it once, and if I add "no-repeat 0px 0px" before the first ; , it makes all the icons disappear. how do I fix it?
SilverHunterN (4 years ago)
Actually, I fixed it. I had to change it to: .pageBottom li.fb{background-image: url(../images/icon_fb.png) ; background-repeat: no-repeat; padding-left:27px;} I had to separate the no-repeat part into its own rule.
Raylan Givens (4 years ago)
Your BG image looks like a close-up shot of a sheet of toilet paper. I don't know what Hgroup is but I learned how to use one...and I kinda like it. Plus I learned 5 commands in under 10 minutes. This is SO MUCH more helpful then my physical html/css classes. In 10 minutes i learned 1/3 of the 2.5 hour class lesson! [10min=50min] *Your hat avatar picture made me think JOHNNY DEPP when I saw it.
Raylan Givens (4 years ago)
CSS background images: wash rinse repeat!
Ralph Phillips (4 years ago)
Thanks for watching. Forget about the hgroup tag. It was released with the initial HTML5 but was later dropped from the syntax. hgroup was a very short-lived element used for grouping headlines. 
Regina Craig (4 years ago)
No matter what I do, or how many times I follow your instructions, I cannot create a background image.  The odd thing is that at one point, some months ago, I was able to successfully created background images.  But for some reason that is no longer the case.  I even copied instructions from a previous and successful background image layout to a new Note Pad page but those same instruction did not work.  I get no image.  Pleeeeze help - there is a beautiful background image that I would like to use as a web page.
Than we have the background-origin, background-attachment and background-clip properties too not to forget to comma separate them to get multiple bg images going , right Ralph ?
Hasaan Khan (7 months ago)
yes bc beautifully correct
McGavel1 (5 years ago)
I like the point you made about how when you set the background image of the hgroup to a % that it was huge because it was relative to its parent container...so you set it by px. Good to know.
Richard Grant (7 years ago)
@009r5t i highly disagree with you, Developers such as myself approve and recommend Firefox to their clients rather than Crome or IE. Here are my opinions. IE - background positioning and sizing is frowned upon. Firefox - scaling is frowned upon crome - background repeat is frowned upon. all of the browsers have their positives and negatives. IE has already become obsolete to the programming world, Crome is still not credited to clients, Firefox is the leading browser clients and developers like
vic. z (7 years ago)
This tutorial is great.
LocalDogRescue (7 years ago)
@archange156 Thats good to know, thanks. Any idea how popular IE 9 is nowadays compared to earlier IE versions? Is IE 6 finally dead? lol
Kiark (7 years ago)
@LocalDogRescue Just note that it works in IE 9. You might need the -ms- extension, but it will work :)
LocalDogRescue (7 years ago)
Great videos, very helpful. If its not too much trouble, while you're narrating can you let us know if the properties you're using work in the dreaded IE browsers? I don't think the 'border-radius' property works in IE, does it?

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.