I don't know why but somehow there's a background gap in the middle so the background image is divided by the content in the middle. Could you help me out?
Here's the HTML Code:
<div class="pertama">
<div class="jumbotron">
<div class="container">
<h1>Aceh Bus App</h1>
<hr class="light">
<h2>Satu Aplikasi. Semua Bus</h2>
<button class="btn">
Tentang Aceh Bus App
</button>
</div>
</div>
Here's the CSS Code:
.pertama {
background: url('../img/bgbl.jpg') center center no-repeat;
background-size: cover;
height: 90%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
position: relative;
padding-top: 180px;
text-align: center;
}
It looks like this:
You have to remove background from your jumbotron element:
.jumbotron {
background: none;
}
Related
I'm working on a website and in a particular section, I want a blue background image to appear for half the section but no matter what I do in terms of CSS, absolutely nothing works.
I've made so many attempts that it's too many to list. What am I doing wrong and how can I fix it?
Here's my html code:
<div class="row secOne secT">
<div class="myImage col-md-6"></div>
</div>
Here's my css code:
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've tried creating a simple html file using your code and by applying
background-size: 50% 100%;
background-repeat: no-repeat;
on the item having the desired image background I got something that seems your desired result.
Full code sample
<html>
<head>
<style>
.col-md-6 { /* Added this definition in order to get a visible div */
width: 800px;
height: 100px;
border: 1px solid black;
}
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;;
background-size: 50% 100%; /* Force background size to only fill half the div */
background-repeat: no-repeat; /* Avoid background repetitions */
}
</style>
</head>
<body>
<div class="row secOne secT">
<div class="myImage col-md-6">
AAAAA
</div>
</div>
</body>
I think you can try this : https://i.stack.imgur.com/fdk00.png
Try this too - https://i.stack.imgur.com/meURR.png
I hope it helps you - sorry if it does not.
You can make appear the blue background of your URL, setting the height CSS property
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 22em;
}
<div class="row secOne secT">
<div class="myImage col-md-6"></div>
</div>
Hope it helps!
I know, this has been discussed over and over again. but it still seems to be a specific understanding issue on my side. after implementing several bug fixes from here and elsewhere my site is still not working as wished.
I got a fixed background-image in the header section of my page. this is working perfectly fine on normal chrome browser. however i cannot get it running on mobile chrome browser
i've got following lines of html:
<body id="page-top">
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container">
<h1 class="text-uppercase mb-0">My Name</h1>
<img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
</div>
</header>
aligned with the following lines of css:
body {
font-family: 'Lato';
max-width: 1280px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
header{
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
padding-top: 6rem;
height:500px;
}
for example i wrote a media query with height of 100% with browser specific commands and so on:
#media (max-width: 576px){
header{
height:100%;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
and then i tried to put y-overflow: scroll; to body and hidden to header enter link description here
Furthermore I tried to put the image into a div like this enter link description here
html:
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container header">
<h1 class="text-uppercase mb-0">My Name</h1>
<img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
</div>
</header>
css:
.header{
position: fixed;
z-index: -1;
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
padding-top: 6rem;
height:500px;
}
whit this technique the picture is gone completely after all
somewhere I must missing something, don't I?
You just need to fix path of background image
#media (max-width: 576px){
header{
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
height:auto;
max-height: 100%;
}
}
I hope this will help!
I am building a simple landing page where the visitor would see a banner, a background image below it and a couple of buttons located vertically beneath each other.
The problem I am experiencing is that, at the moment, both the banner and the background image are starting from the same position (the top left corner of the web page), thus part of the background is hidden by the banner.
The code I currently have is:
<style>
body {
background: url("http://url.to/background") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
}
#Wrap {
position: absolute;
}
</style>
<body>
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
</body>
The expected result is to have the banner image take the beginning of the page while fitting into the screen without causing any extra scroll to appear. What is more important is to have the background start after the banner.
A fiddle could be found at the following URL:
https://jsfiddle.net/morL1zka/
Any help or ideas would be appreciated.
you should use background-position-y for this, and you need to set value which is equal to the height of the banner
body {
background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
background-position-y: 100px;/*the value must be the same height as the banner */
}
#Wrap {
position: absolute;
}
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
You can easyli solve this using JavaScript. The Backgroundposition will be automatically set under the banner, without knowing the height of it.
var body = document.getElementById('body-margin');
var banner = document.getElementById('banner');
body.style.backgroundPositionY = banner.offsetHeight + 'px';
body {
background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
}
#Wrap {
background-color: #345370;
text-align:center;
}
<body id="body-margin">
<div id="Wrap">
<img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" />
</div>
</body>
Here is also your updated fiddle: https://jsfiddle.net/morL1zka/2/
I try to make background with image, this image
I have this code (page on bootstrap).
.cover-losos{
background: url('http://patwoj.hekko24.pl/zdrowie/images/losos.jpg') no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12 cover-losos">
</div>
</div>
</div>
Why isn't the photo showing? What am I doing wrong?
Your issue is not the background. Your div where you set the background has neither a width nor a height set meaning that the size of the background image is 100% of 0px.
try adding a width and height to your cover-losos div.
.cover-losos {
background: url('https://placeimg.com/640/480/any') no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
width: 100%;
height: 300px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12 cover-losos">
</div>
</div>
</div>
I am using bootstrap and am trying to make my background images responsive, but its just not working! Here is my code...
html
<div class="row">
<div class="bg">
<img src="../img/home_bg.jpg" alt="home background image">
</div><!-- /.bg -->
</div><!-- /.row -->
css
.bg {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Please help me! Thank you!
You need to read up a bit more about the difference between background images and inline images. You cannot style an img tag as a background, it is a block level element, and flows with the document. A background image is a property of an element. Since you want this image to be the background of the whole page, you can apply the background image to the html or body elements.
http://jsfiddle.net/8L9Ty/3/
body {
background: url('http://placekitten.com/900/900');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am trying from so long, and finally I found that in bootstrap 3.3.5 you have to use the height and width property to set the background.
I used the following code:
.header{
background-image: url(images/header.png);
height: 500px;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Since you don't mention background image for your "DIV" tag. I assume you want to apply background image for your whole page. Is this what you looking for ?
Stylesheet
body {
background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
}
HTML Part
<body>
<div class="row">
<div class="bg">
</div><!-- /.bg -->
</div><!-- /.row -->
</body>
http://jsfiddle.net/AziziMusa/8L9Ty/5/
remove the img tag <img src="../img/home_bg.jpg" alt="home background image"> and do it with css as below :
html
<div class="row">
<div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->
css
.bg {
background-image: url('../img/home_bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body, html {
height: 100%;
margin: 0;
}
.bg {
/* Full height */
height: 100%;
/* The image used */
background-image: url("https://picsum.photos/id/1/200/300");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="container-fluid bg" >
</div>