I have a simple code for a simple webpage, but it does not work: for some reason, the background is not displayed. I checked everything in different browsers on different computers. Where do you think there might be a mistake?
.section--map {
padding: 40px 0;
background: #e6e6e6 url("../images/map-bg.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
<section class="section section--map">
<div class="container">
<div class="map">
<div class="map__title">
<div><i class="fas fa-map-marker-alt"></i></div>
<h2>Open Map</h2>
</div>
</div>
</div>
</section>
Did you check if path to your image is correct or it might be that your image type is .jpeg?
Related
I'm new. I've created a <div> inside a <section> and in this <div> I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take all the space of their Gridlex block.
Anyone, would know what I can do to fix this?
Here the photo:
enter image description here
Here the CSS I've wrote for both images:
.bg-about1 {
background-image: url('../images/about1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
.bg-about2 {
background-image: url('../images/about2.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
<section class="light-bg section-about">
<div class="grid">
<div class="col-5_sm12-middle">
<h2 class="padded-7p center uppercase p-white">Title.</h2>
</div>
<div class="col-7_sm12-middle bg-about1">
<!-- <img class="img100" src="./images/about1.jpg" alt="Art design"> -->
</div>
<div class="col-5_sm12-middle bg-about2">
<!-- <img class="img100" src="./images/about2.jpg" alt="photo"> -->
</div>
<div class="col-7_sm12-middle">
<p class="padded-2 p-white"> my text.</p>
</div>
</div>
</section>
maybe try instead of
background-size: cover;
writing:
background-size: contain;
First of all, my native language is not English I hope that question and description are clear. I'm sorry if they're not.
Problem:
I'm using MDB framework, when I use the grid system the width of the last column is more greater than body. I tried to put widht: 100%; in the content and in every column (Class: Nx).
How do I fix this?
Html:
<div class="Mycolumns">
<div class="row">
<div class="col-8 N1" style="background-image: url(Resources/img/1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N2" style="background-image: url(Resources/img/Sin%20t%C3%ADtulo-1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N3" style="background-image: url(Resources/img/3.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N4" style="background-image: url(Resources/img/4.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N5" style="background-image: url(Resources/img/5.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
</div>
</div>
Css:
.N1, .N2{
height: 500px;
}
.N3, .N4, N5{
height: 300px;
}
I just encountered the same problem. What was doing it was one of my nested elements was set to width: 100vw - The view width seems to be the entire browser window including the scrollbar, so you effectively get '100% + scrollbar width' as your width, which gave me a 15px or so blowout. Changing the element's width to 100% fixed it.
I am noticing an interesting problem with my site. I have a section that has a static background image and as you scroll there's a quote and button (eventually will link to a store) over the top of it. To my knowledge, it was working in the past, but yesterday I noticed after a few seconds the background image is gone, replaced with just a gray background. The image will flicker in and out a bit before permanently being replaced with the gray background.
Here is my HTML:
<section class="bar background-image-fixed-2 no-mb color-white text-center">
<div class="dark-mask"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icon icon-lg"><i class="fa fa-leaf"></i>
</div>
<h3><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
<p class="text-center">
Get Some
</p>
</div>
</div>
</div>
</section>
Here is my CSS:
.bar.background-image-fixed-2 {
background-image: url('../img/fixed-background-2.jpg');
background-position: center center;
background-repeat no-repeat;
background-attachment: fixed;
background-size: cover;
}
The image URL is correct because it initially loads for a couple of seconds. Originally, this was written short hand but some suggestions I've seen recommended doing the long form for the CSS. I split it out, but that doesn't seem to make a difference.
Actual look (incorrect):
Expected look (which I get for a few seconds before it changes automatically):
Edit:
Here is a fiddle (though it's missing some javascript so it'll look funny).
please check your url is not proper loading :
.bar.background-image-fixed-2 {
background-image: url('https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=1650&q=80');
background-position: center center;
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="bar background-image-fixed-2 no-mb color-white text-center">
<div class="dark-mask"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icon icon-lg"><i class="fa fa-leaf"></i>
</div>
<h3 class="text-white"><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
<p class="text-center">
Get Some
</p>
</div>
</div>
</div>
</section>
I am creating a web app using angularjs. I have added the navigation, content and footer in index.html. so ui-view will change the route accordingly. I want to show full screen background image for main page and the rest of the page will only show according to their content.
<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>
Here is the HTML will show in ui-view and want to show 100% height. It does not show 100% height. If I up it in index.html it is showing 100% background image width. May I know which one is causing the issue.
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat center center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
you need to set the height to 100% on the body (and possibly all parent elements too)
alternatively, try the new viewport height CSS unit ...
height: 100vh
see https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
supports looks good ...
http://caniuse.com/#feat=viewport-units
This is where the background is in my css. The picture fits perfectly like this, and I don't want to change the position or size or anything in normal browser. I just want the image to resize itself when viewed on phone devices or tablets.
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/mee.JPG) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: 0px 1px;
}
This is the html part:
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<h1 class="brand-heading">Welcome</h1>
</div>
<div class="col-md-8 col-md-offset-4">
<font size= "6"><marquee behavior="slide" scrollamount ="22"><b>ENGINEER</font></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="20"><b>DEVELOPER</b></font></b></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="18"><b>COFFEE ADDICT</b></font></b></marquee>
</div>
<div class="buttonn">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
You need to create additional css for different screen size, essentially making it responsive.
This is a great link explaining that and how to go about it: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#a-note-on-min-device-width
The CSS used most often for responsive web design are min-width, max-width, min-height and max-height.
Hope that was helpful :)