HomeХобби и стильRelated VideosMore From: Dan Zuzevich

Full Width Background Image with Transparent Overlay

556 ratings | 105031 views
Learn React For Free On My Youtube Channel (2018)! https://danzuzevich.com/react-thumbnail-gallery/
Html code for embedding videos on your blog
Text Comments (111)
Dan Zuzevich (7 months ago)
Hi Everyone. It has been a long time since I created a video. It is now 2018, and I have decided to come back and focus on cutting edge JavaScript and React videos. If you are interested in checking out my first new video you can visit https://danzuzevich.com/react-thumbnail-gallery/ or just subscribe to my channel so you can be notified when it is released!
Rehan Aziz (6 months ago)
hello sir,,, i am a student of javascript so i want to learn it from your videos if you can please help me out.... thanks in advance
SuperDallasTV (1 month ago)
Awesome bro!
Aakash Aalam (2 months ago)
hey can you tell me the name of your code editor and what plugins you are using???
VIVEK WALNEKAR (3 months ago)
Hussain Muktar (3 months ago)
it is not proper solution
Skillthrive (4 months ago)
YES! Thank you, it worked! I've been trying to figure out how to get this done without having to restructure my entire hero section.
thank you so much....
Skynet (6 months ago)
Ok guys, it's time for a tutorial on bla-bla-bla. You all should know how to do it so I'm not going to teach you. Bye.
Marcos Venícius (6 months ago)
can make responsive?
rana rony (7 months ago)
Thank you for solved my problem
Joseph Oikelomen (7 months ago)
wow thanks a lot i really enjoyed your video
shahidul islam khan (8 months ago)
thanks for the solution. i am a bengali web designer
The Answer (9 months ago)
the opacity stops right before it gets to the bottom. why? i have everything in here as it is
Heria The young one (9 months ago)
Thank you! Realy helpful c:
C/P/J (10 months ago)
cool video, had no problems with it working. looked everywhere for a tutorial finally found your vid
SSS Highlights (10 months ago)
Can somebody tell me how to add the actual picture.... (SHOW EXAMPLE PLEASE)
SSS Highlights (10 months ago)
How do you put text over it
Roberto Matthews (7 months ago)
Hello there! I just created a vid that answers your question! https://youtu.be/eIngNHvWQwk
Aakash Shrestha (8 months ago)
Did you find out >
Kapi21k (1 year ago)
What program are the best and free for Html web creating ? :P
Klab (3 months ago)
visual studio code or atom.io
Klab (3 months ago)
+SSS Highlights now thats just sad
SSS Highlights (10 months ago)
Dewi Jones (11 months ago)
UjustFoundAnObject (1 year ago)
that was what i looking for .. Helpfull video ty
Alex Quinn (1 year ago)
I keep having a bug in dreamweaver and it doesn't seem to like "background-image". No matter where I place it, even if it's the only code in the css file, I get an 'expected RBRACE' error. I've tried changing the code and adding } in different spots, but nothing seems to work. Here's the code: #AboutBackground { background: url(../../images/1x/About Page Design.jpg); }
andy original (1 year ago)
this video was awesome! thanks
Michael Burch (1 year ago)
Simple but great tutorial. Just what I've been wanting to achieve in some of my landing pages and/or headers. Thanks so much!
Rohan Kadam (1 year ago)
It's not working for me, Sir. I tried everything mentioned in the video and the code is exactly same. Can tell some common mistakes ?
Swahili SpicE (1 year ago)
this was the best tutorial on this topic. once i watched it, it worked straight away however I had to change position of #hero to absolute as when it was on relative, it didn’t fill the whole page. it appeared above my page content. so changing to absolute solved the issue. but one problem i have: the overlay covers all of my content and the z-index doesn’t seem to have worked. can anyone help?
Swahili SpicE (1 year ago)
oops, don’t worry guys, my fault. It works. I’m kind of new to this
Jesse Dijkstra (1 year ago)
How you get that link 'green' looking? I use Atom, but at me, he doesn't look green, but gray. That's not good I quess.
SSS Highlights (10 months ago)
Probably just the skin
Very helpfull tip
Gabriel Hideki (1 year ago)
Thank you so Much ! !!
Mitch TheGuy (1 year ago)
Shahidul Islam (1 year ago)
Sayko Men (1 year ago)
taşşana kurban krdş
Ikram Hamizi (1 year ago)
Changing the div's *background* *opacity* also changes the *texts'* *opacity* that are within that div. *Any* *solutions* *to* *this?*
Roberto Matthews (7 months ago)
Hello there! I just created a vid that answers your question! https://youtu.be/eIngNHvWQwk
Seance Studio (2 years ago)
THANK YOU SO MUCH. you'd think tutorials for something like this would be in abundance but its actually surprisingly hard to find. awesome and straightforward video
The Dude (2 years ago)
What desktop app do you use to write the codes with?
Taylor Gulf (2 years ago)
Soby (2 years ago)
bless ur soul
iTz Catchyy (2 years ago)
For creating the fullwidht background, why not using the display: flex; etc?
Akeem Louigarde (2 years ago)
Hey Daniel, i have tried following along but my image is not appearing on the webpage. I am using Notepad++ and i created a folder called "Website". In the Website folder i have two folders called "img" and "css". What i wrote is copied and pasted underneath. I wrote this following code for my .html: (this file is located in my Website folder) --------------------------------------------------------------------------------------------------------- <!Doctype html> <html> <head> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="FJ"> <div id="overlayFJ"></div> </div> </body> </html> ----------------------------------------------------------------------------------------------------------- and i wrote this following code for my .css: (this file is located in my css folder) ----------------------------------------------------------------------------------------------------------- html, body{ height: 100%; width: 100%; } #FJ { background-image: url('..Website/img/Javiera5.jpg'); background-size: cover; background-position: center center; position:relative; height:100%; width:100%; z-index: -10; } -----------------------------------------------------------------------------------------------------------
Dan Zuzevich (2 years ago)
Akeem Louigarde the path to your image is wrong. it needs to be, " background-image: url('../img/yourfilename.jpg'):
Akeem Louigarde (2 years ago)
Lml i found out my problem, it turns out my position was suppose to be set to absolute, when i typed position:relative it went blank. thanks man, this video helped out a lot.
Luca Guarro (2 years ago)
z-indices are not needed with this. Same result achieved if omitted. Which is also better because you don't have to worry about giving z-indices to content put inside the hero-overlay div to get them to work properly.
Dan Zuzevich (2 years ago)
Very true actually.
Bram Beekman (2 years ago)
Love this video! I did this, but when i add some text it dont overlay the background can you help me? (when i place the text inside the div the A and Hover element dont work)
Roberto Matthews (7 months ago)
Hello there! I just created a vid that answers your question! https://youtu.be/eIngNHvWQwk
Winson Wong (2 years ago)
my a hover element wont work either
Sundus Hussein (2 years ago)
thank you...finally something that is nice,simple and creative...good work
Winter Olympics (2 years ago)
you fell from the sky. that's what I was looking for. before starting. Thanks.
MG Koch (2 years ago)
Mr. Z... Awesome video lesson for "overlay", I tweaked the margin and float a bit and was able to get my single links to appear over the top of my container image and work responsive as well. I'm new to css, two weeks ago all I knew anything about was html. Finding out that css in combination with html was really the best way to go now days and something I didn't want to admit. But some crash youtube css lesson's from guy's like you have not only smashed my brain to bits and caused me to have code nightmares but have also allowed me to make my sites look so much better... Hats off to you Sir... Thank You.. !!
MG Koch (2 years ago)
Mr. Z, do you do anything with turn.js? My exp with it is -0- lol. I have some code but can't seem to get the page to display in browser and was wondering if you know about turn.js?
Dan Zuzevich (2 years ago)
MG Koch keep fighting the good fight.
Samira Keysi (2 years ago)
What are you supposed to do with the CSS? I am so confused!
Dan Zuzevich (2 years ago)
I need something more specific than that to help, lol. Can you elaborate?
Joseph Beatz (2 years ago)
i love your tutorials buddy the best on you tube i've seen so far nice and clear and straight forward keep the videos coming
Nic#k (2 years ago)
Awesome !
Patrick Cardoso (2 years ago)
thank you so much
Being Anonymous-Sandip (2 years ago)
my image is displaying but no any transparent why?? <html> <head> <style> body{ margin:0px; } #hero{ background-image:url('img/indira.jpg'); background-size:cover; background-position: center center; position:relative; top:0; bottom:0; height:100vh; z-index: -10; } #hero-overlay{ position:absolute; background-color:rgba(0,0,0,0.5); top:0; bottom:0; height:100%; width:100% z-index: -5; } </style> </head> <div id="hero"> <div id="hero-overlay"></div> </div> </body> </html>
Liky (2 years ago)
Vari210 (2 years ago)
Freddy Plays The Rock, Has Come Back 🎤
Ron (2 years ago)
Every time i try to put text it just goes under the picture. Does anyone know how i can fix this?
Sanzz (2 years ago)
Ron Kosova hey could you please tell me a bit more because I have the same problem 😓
Ron (2 years ago)
+Daniel Zuzevich thank you for your reply but i managed to fix this problem by putting the code in the main overlay div. Thank you for this very helpful video :D
Dan Zuzevich (2 years ago)
Need to see the code. Go to github.com, sign up for a free account. Verify your email and login and then go to this link https://gist.github.com/. Paste all of your code in there, save it as a public gist, and post the link in your comment here so I can visit it and see whats going on.
WhyNotEveryThing (2 years ago)
Wonder why my image is not showing up. #backgroundCover{ background-image: url('../images/background.png'); background-size:cover; background-position: center center; position:relative; top:0px; bottom:0px; height:100%; z-index: -10; }
Dan Zuzevich (2 years ago)
Excellent. Glad it worked out.
WhyNotEveryThing (2 years ago)
+Daniel Zuzevich I followed your other tutorial with title : Background Image Alignment CSS and it worked like a charm ! thank you so much. I guess the problem was with the code url('....'); because before my css was not in a different folder. Now that I put my style.css in a css folder and tried the code - it worked! Weird!
WhyNotEveryThing (2 years ago)
+Daniel Zuzevich Please take your time. :)
Dan Zuzevich (2 years ago)
I will make a GitHub repository for it that you can access it and download. It will have to be in a bit though.
WhyNotEveryThing (2 years ago)
If possible you can send in the directory you have in this tutorial so that maybe I can figure out what the problem is.
Ujjwaldeep Singh (2 years ago)
Which software you are using to write code , i use notepad++ and want to try something new
adriel yehuda susanto (8 months ago)
Dan Zuzevich (2 years ago)
No problem brohemoth.
Ujjwaldeep Singh (2 years ago)
Thnx brah
Dan Zuzevich (2 years ago)
atom. It's created by the developers at github. it's free, and you can download it at atom.io
Alexandros S. (2 years ago)
Thanks very much. Your video was great.
BlueBird (2 years ago)
I did subscribe to your channel :) Thanks! I'll be sure to check that out!
Dan Zuzevich (2 years ago)
MissAbbyH not sure if you subscribed to my channel, but I do have a beginner jquery tutorial.
BlueBird (2 years ago)
No problem :) Also, I'm new to this web stuff and all I know is html and css. Any java script or php would be awesome, too!
Dan Zuzevich (2 years ago)
MissAbbyH done deal. that's actually a really good idea. Thanks for the recommendation.
BlueBird (2 years ago)
Any animation vids would be cool! :)
Dan Zuzevich (2 years ago)
Just wanted to let people know that are watching this, 100vh may cause some "jumping" issues on mobile. You'd want to set a media query on your hero and overlay to a fixed height on mobile device. If you have any questions on how to set the media query, feel free to comment below.
Dan Zuzevich (2 years ago)
It was just a random height that I chose. VH and height 100% are known to cause issues on IPhone, and other devices. If you want something predictable, i'd stay with a fixed height, and not really worry about the full height thing. For example, 100vh set on something like the hero I have in this video, causes a very noticeable "jump"(atleast on my android) because of the inherit built in feature of the browser address bar. When you initially load the page, the address bar is part of the screen, and makes the hero not span full height yet. When you start scrolling though, the address bar will auto hide and since the hero css is set to 100vh, it immediately attempts to stretch it to be full height, causing an abrupt sort of "jump", if you will.
John Rodrigues (2 years ago)
Thanks for this Daniel. I'm trying to provide fallback for older browsers and older mobile phones in particular so I was interested in testing this out.  I'm curious as to why you chose 550px as the height.  Is it essentially full height on most older phones presumably?  Are vh units or height 100% recognized in iPhones 4 and up?
Dan Zuzevich (2 years ago)
How'd it go?
Pedro gee (2 years ago)
Thanks for the response. I'll try it out and let you know how it went.
Dan Zuzevich (2 years ago)
body { margin: 0; } /* Laptop and up */ #hero { background: url('hero.jpg'); height: 100vh; position: relative; background-size: cover; background-position: center; } #hero-overlay { position: absolute; height: 100%; width: 100%; background: rgba(0,0,0,0.4); } /* Small Tablets & Down */ @media(max-width: 767px) { #hero { background: url('hero.jpg'); height: 550px; width: 100%; position: relative; background-size: cover; } #hero-overlay { position: absolute; height:550px; width: 100%; background: rgba(0,0,0,0.4); } }

Would you like to comment?

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