I am developing a Web Page where background of a div is not displaying , only blank white screen is displaying but When I am using <img src="IMG/Banner.jpg"/> tag instead of background:Url(IMG/Banner.jpg); that image is displaying.
Please help me why background images are not working.
Please have a look at my code for div
.download-area {
background:url("IMG/secondary-banner.jpg") repeat scroll top center;
padding-bottom: 200px;
padding-top: 78px;
position: relative;
}
.download-area .section-title {margin-bottom: 42px}
.download-area .section-title > h1 {margin-bottom: 22px;}
.download-area .section-title p {
color: #fff;
font-size: 1.5em;
}
.download-buttons .button, .download-buttons .button:hover {
background: #ffffff none repeat scroll 0 0;
border-color: #009fdd;
color: #009fdd;
margin: 0 15px;
padding: 0 28px 0 54px;
position: relative;
background-color: #009FDD;
color: white;
}
.download-buttons .button img {
left: 26px;
position: absolute;
top: 10px;
transition: all 0.3s ease-in 0s
}
.download-buttons .button img.btn-hover {
display: none
}
.download-buttons .button:hover img.btn-hover {
display: block
}
.download-buttons .button:hover {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-color: #ffffff;
color: #ffffff;
}
<div class="download-area" id="pricing">
<img src="IMG/secondary-banner.jpg">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="section-title">
<h1>Get <span>Started</span></h1>
<img src="IMG/title-bg-white.png" alt="">
<p></p>
<p class="text-white">First 100 minutes of Video processing on us!</p>
</div>
</div>
<div class="col-md-12">
<div class="download-buttons text-center">
UPLOAD YOUR FIRST VIDEO
</div>
</div>
</div>
</div>
</div>
Background image is working properly with online image.
i think your problem is the Link to your image!
Your Code is Working Well : Fiddle
Where is your image and How do you Link it ? maybe this is the problem!
Related
* {
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
padding: 10px;
background: #f1f1f1;
}
.header {
text-align: center;
background-color: rgb(255, 255, 255);
padding: 20px;
margin-bottom: 15px;
}
.header h1{
font-size: 30px;
}
.navbar {
overflow: hidden;
background-color: rgb(52, 52, 52);
position: sticky;
top: 0;
box-shadow: 5px 5px 10px rgba(52, 52, 52, 0.753);
}
.drop {
float: left;
overflow: hidden;
}
.drop .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.navbar .a {
float: left;
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
font-size: 20px;
}
.navbar .a:hover {
background-color: white;
color: black;
}
.drop-content {
display: none;
position: absolute;
background-color: rgb(234, 234, 234);
min-width: 160px;
z-index: 1;
}
.drop-content .a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop:hover .drop-content {
display: block;
}
.leftside {
float: left;
width: 75%;
}
.rightside {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: rgb(176, 176, 176);
width: 100%;
padding: 20px;
}
div .fakeimg:hover {
border: 1px solid black;
cursor: pointer;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 30px;
text-align: center;
background-color: rgb(248, 248, 248);
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftside, .rightside {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!--This is a link to the CSS.-->
<link rel="stylesheet" href="first_webpage.css">
<body>
<!--This is our header.-->
<div>
<header class="header">
<h1>First Webpage</h1>
</header>
</div>
<!--This is a navigation bar.-->
<div class="navbar">
Home
Projects
Contact
<div class="drop">
<button class="dropbtn">Dropdown
<i></i>
</button>
<div class="drop-content">
Link 1
Link 2
Link 3
</div>
</div>
About
</div>
<!--This is the first and main colum.-->
<div class="row">
<div class="leftside">
<div class="card">
<h2>Title One</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.1 City</figcaption>
<p>This is subsection title</p>
<p>This is the first paragraph of the main section.
This also my first webpage. It definitly looks
like something from the <i><a href="https://www.nytimes.com/">
New York Times</a></i>. It's coming out pretty good;
i just need to continue taking it one step at a time.
Nonetheless, I will contue on with this section and
not bore you. Enjoy the rest of my layout.</p>
</div>
<div class="card">
<h2>Title Two</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.2 Flowers</figcaption>
<p>This is a second section Title</p>
<p>This is a second paragraph, I really don't know
what to write. It's not like this is an engligh
101 class. i mean jesus. Talking about jesus, do
you know they're making a jesus game... i mean
what has the gaming industry come to?</p>
</div>
</div>
<div class="rightside">
<div class="card">
<h3>About Me</h3>
<div class="fakeimg" style="height: 100px;">Image</div>
<p>Some text about me so that the visiter may
know a bit more about the developer that they're
interested in...</p>
</div>
<div class="card">
<h3>Popular Posts</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Social Media</h3>
<p>Some social media pages that individuals can
follow me on....</p>
</div>
</div>
</div>
<!--This is a footer-->
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
I'm trying to create a dropdown menu for my dropdown button; as I create the dropdown button everything seems to be fine, however, once I put the position to "absolute" it does not allow me to view the content that is within the dropdown button even when I'm hovering over it. I tried changing the position to anything other than "absolute" and it does allow me to view the content, but it would either stretch the navigation bar down to make room for the options or place the content lower than where the button is located. Can anyone help me out with this problem? I provided the full code for my html and CSS because I think it may be clashing with another code.
I want to move an image downward . but i cant when i use top or bottom the image moves right or left .
(i dont know how but i managed to make it like a layer mask in photoshop!)
i used margin , padding , top , bottom etc but none of them worked
here is my code
.header {
height: 200px;
background: #313b3d url(https://preview.ibb.co/mFmpK5/grotti_canyon_wallpaper_1366x768.jpg)no-repeat 160px top;
}
.head-right a {
color: #fff;
}
.head-right a:hover {
color: #fff;
}
.head-right h1 {
position: relative;
margin-bottom: 17px;
padding-top: 40px;
font-size: 28px;
text-align: center;
background: url() no-repeat center top;
}
<div class="header">
<div class="head-wrp">
<div class="head-right">
<h1>(*title*)</h1>
<h2>(*short_description*)</h2>
</div>
<div class="head-left">
<box:menu>
<ul>
<view:menu>
<li class="(*menu_item_selected*)">
(*menu_item_title*)
</li>
</view:menu>
</ul>
</box:menu>
</div>
</div>
</div>
that's because you are using the background property to define the image, then you'll have to use css background-position
.header {
height: 200px;
background: #313b3d url(https://preview.ibb.co/mFmpK5/grotti_canyon_wallpaper_1366x768.jpg)no-repeat;
background-position: 0 50px;
}
.head-right a {
color: #fff;
}
.head-right a:hover {
color: #fff;
}
.head-right h1 {
position: relative;
margin-bottom: 17px;
padding-top: 40px;
font-size: 28px;
text-align: center;
background: url() no-repeat center top;
}
<div class="header">
<div class="head-wrp">
<div class="head-right">
<h1><a >(*title*)</a></h1>
<h2>(*short_description*)</h2>
</div>
<div class="head-left">
<box:menu>
<ul>
<view:menu>
<li class="(*menu_item_selected*)">
<a >(*menu_item_title*)</a>
</li>
</view:menu>
</ul>
</box:menu>
</div>
</div>
</div>
I want the webdsn-drop to be behind the #navbuttons-container but I can't get it to work. For some reason #navbuttons-container div is behind it #webdsn-drop and I want these layers reversed.
body {
background-color: #0f0f0f;
width: 980px;
margin: 0 auto;
}
/*-----NAVIGATION-BAR-----*/
#navbuttons-container {
background-color: #303030;
width: 100%;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
padding: 0;
z-index: 10;
}
#web-name {
color: #f7f7f7;
font-family: 'calibri light';
padding: 4.5px 0 0 10px;
float: left;
font-size: 30px;
margin: 0 auto;
letter-spacing: 10px;
}
#navigation {
max-width: 980px;
min-width: 854px;
margin: 0 auto;
}
.navbuttons {
float: right;
font-size: 20px;
font-family: 'calibri';
display: flex;
}
.navbuttons a {
color: #f7f7f7;
text-decoration: none;
padding: 12.5px 20px;
background-color: #303030;
transition: background-color 0.5s ease;
}
.navbuttons a:hover {
background-color: #5b5b5b;
transition: background-color 0.5s ease;
}
#webdsn-drop {
position: fixed;
left: 0px;
background-color: red;
width: 100%;
z-index: 9;
}
<div id="navbuttons-container">
<div id="navigation">
<h1 id="web-name">PORTFOLIO</h1>
<div class="navbuttons-container">
<div class="navbuttons">
Logo Design
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Art & Misc.
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Posters & Flyers
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div id="webdsn-menu" class="navbuttons">
Website Design
<div id="webdsn-drop">
<h1 class="subname">WEBSITE DESIGN
<h1>
</div>
</div>
</div>
</div>
</div>
Apply z-index: -1; to .webdsn-drop- since it's a child element of #navbuttons-container, you need to use a negative z-index in order to move it behind the parent.
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
I noticed that my web page has a white space/bar right after the footer and at the bottom of the page:
I tried to find the cause of this by using the inspect element in Chrome and can't find anything. I'm using Boostrap and here's my footer HTML/CSS:
<div class="container">
<hr>
</div> <!--end container-->
<div id="footer">
<footer class="container">
<div class="row">
<div class="col-md-3" id="mail"> <img src="images/mail.png" alt="e-kiri" title="Kirjuta mulle!"/>
<p>info#8delfiini.ee</p>
</div>
<div class="col-md-3" id="tel"> <img src="images/phone.png" alt="telefon" title="Helista mulle!"/>
<p>(+372) 52 99 131</p>
</div>
<div class="col-md-3" id="addr"> <img src="images/location.png" alt="asukoht" title="Asukoht"/> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank">
<p>Jansuki Shop<br />
Müürivahe 17<br />
Tallinn </p>
</a> </div>
<div class="col-md-3" id="fb"> <img src="images/fb.png" alt="Facebook" title="Facebook"/> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank">
<p>8 Delfiini Facebookis</p>
</a> </div>
</div>
<!--end row-->
</footer>
</div>
<!--end footer-->
And the CSS for the whole contact page:
/*kontakt*/
#kontakt
{
background: url(../images/IMG_1340.jpg) no-repeat fixed;
width: 100%;
margin-bottom: 0;
}
h2.cont-heading
{
background: url(../images/kontakt.png) no-repeat 0 155px;
background-size: 48.5px 53px;
padding: 160px 0 5px 60px;
color: rgb(255,255,255);
text-transform: uppercase;
}
h1.invitation
{
font-family: 'latoregular', sans-serif;
color: rgb(255,255,255);
font-size: 7em;
}
#logo
{
width: 28px;
height: 40px;
margin-top: 10px;
}
#part3, #part4
{
padding: 40px 40px 40px 0;
}
#part4
{
padding: 30px;
color: rgb(255,255,255);
}
hr
{
border: 0;
height: 1px;
margin: 0;
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
background-image: -o-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
}
/*footer styles*/
#footer
{
padding: 40px;
color: rgb(255,255,255);
text-align: center;
}
#footer a
{
color: rgb(255,255,255);
font-size: 1.3em;
}
#mail img, #tel img, #addr img, #fb img
{
height: 60px;
width: 60px;
display: block;
margin: 0 auto;
}
#mail a, #tel a, #addr a, #fb a
{
padding: 50px;
font-family: 'latoregular', sans-serif;
}
I'm new to Bootstrap. Is there maybe something special in its CSS that causes this? Thank you for your help. :)
You can fix it by setting a padding for the #footer .row:
#footer .container .row {
padding-bottom:8px;
}
Beautiful layout btw :)
This kind of things has mostly to do with not setting the body style:
body
{
margin: 0;
padding: 0;
}
It can also happen that you have set the heights of other elements wrongly.
It's a good practice to reset all the predefined styles, see http://www.cssreset.com/
And just to be sure; your background image is big enough, right?