spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

Div with background image inside div doesn't work properly


The .home div needs to be absolutely positioned in order not to "push" the background div downwards. The background div shouldn't have the fullscreen-img class, since most of those rules should be removed. It only needs height: 100% because divs have width: 100% by default since they're block elements. Of course, move the inline styles into a class or ID rules, I left them there just to show you.

That's all you need basically:

  • remove the .fullscreen-img class from the background div
  • set its height to 100% instead
  • make the .home div absolutely positioned

See it here: http://codepen.io/anon/pen/azzexY

*{
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

#video-section{
  margin: 0 auto;
  width: 1230px;
  height: 500px;
}

.dark-section{
  background-color: black;
}

.home{
    display: table;
    height: 500px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
<div
id="video-section" class="dark-section">
  <div class="home"></div>
	<div class="" style="height: 100%;
background-image:
url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>


UPDATE

Fixes/changes for your website for the problematic element (<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>):

  • left: initial;
  • width: 1230px;

Categories : HTML

Related to : Div with background image inside div doesn't work properly
Chrome background-image doesn't refresh on click
I needed to apply background-image to wrapper instead of body tag. Also I needed to add bg color on every new background class, since chrome had issues with transparency too. Background-image property in chrome is behaving really poor when it comes to reloading on event...

Categories : CSS
how to run a background thread properly for a MVC app on shared host?
I think you should try Hangfire. Incredibly easy way to perform fire-and-forget, delayed and recurring tasks inside ASP.NET applications. No Windows Service required. Backed by Redis, SQL Server, SQL Azure, MSMQ, RabbitMQ. So you don't need admin priveleges. RecurringJob.AddOrUpdate( () => { using (UserZipDBContext db = new UserZipDBContext()) { //delete old file

Categories : C#
Background-image repeating when resize window (background-repeat is no-repeat)
Just remove background-repeat and set background something like the following: background: url(http://lorempixel.com/400/200/) center center no-repeat; Demo: http://jsbin.com/cacofotaqo/1/

Categories : HTML
MySQL doesn't work properly when query is very big
MySQL has a limit for a query size, defined by max_allowed_packet configuration value - in my.conf. Or the result of the query may be too big - try to increase memory_limit php variable in php.ini. Example: memory_limit = 256M

Categories : Mysql
Document.Onload doesn't work properly in Kik
Don't ask me why, but this works. I'm just going to assume that you CANNOT wrap kik.getUser in a $(document).ready statement! But who cares -- if kik.getUser works, then you already have access to the DOM. Cheers! // Kik user-specific JS if(kik.utils.platform.browser.kik) { kik.getUser(function (user) { if ( user ) { $('#message').html("I work now."); }}); }); // Kik

Categories : Javascript
Recently Add
How can I set a google-font as default-font in CKEditor?
Cross browser styling issue
Submitting/detecting a submit a form by clicking on a CSS button
Html Unknown border around h3?
vim syntastic:
proprietary attribute "novalidate"
Hover effect is not working,even style written for it correct?
Why margin-top different for chrome and safari?
Pass values and parameters from HTML to CGI
How to stop repeating a background image in html email without using CSS?
Why does GMail break inline (CSS) styles for an email with minified markup/HTML using quote-printable encoding?
Give a space in the orderedlist
How to expand the height of li inside vertically centered div?
making newsletter(HTML) with SpringFramework3
Why IE not showing my css box shadow effect
Layout image and paragraph horizontally
Do I Have To Specify A Height For BG Image Or Parent Container?
How to search hyper link tag based on key pressed
Align three images in footer side by side
Foundation Top Bar Dropdown z-index issue
CSS: Pseudo-elements
IE8 back button resetting form
How to position a div made "box" with HTML
htaccess rewrite not changing html form post url
Alignment of text field and text area from Bootstrap elements
Bootstrap table not filling parent
How to automatically get element height and use that height in overlay effect
Relative Link To Local File
1px gap issue with responsive HTML template in outlook - im going crazy
"Compressing" Header Codes?
Tag appears to be interpreted as part of a link and thus breaking the link
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.