CSS:
.jumbotron{
background: url("jumbotron.jpg") no-repeat center center;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
background-size: 70%;
margin-top: 0 auto;
}
.push-spaces {
height: 550px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting .glyphicon {
font-size: 4em;
}
HTML:
<div class="jumbotron">
<div class="container-fluid push-spaces">
</div>
</div>
Viewable on voiddevelopment.com
It seems as though whenever I shrink the page to the width of the phone, the image gets a ton of padding on the top and bottom, making it look like there's a lot of white space.
Looks like background-align automatically centers if you do not specify a value.
You centered you background-image in the center center, it means that you background-image situated in the vertical and horizontal center of your block. So, the solution is just remove one center. Like this background: url("jumbotron.jpg") no-repeat center; - in this case you just center background-image in horizontal.
Related
Hi i have written css for fixed header that is banner image should be fixed when we scroll the page the content should be scrolled on the top of the image but if i give the background attachment as fixed the height of the image is getting small and getting blank space at the top as shown in below diagram.
Css i have written this
.partnerspage {
background-image: url(http://www.server.com/bl/banner-1920x375-Partners.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
Here is the fiddle link: https://jsfiddle.net/xykchmg9/1/
Whatever you are looking for here it is: this css can fix your problem I hope
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
.parallax {
background-image: url("https://dmm8trq3la0u4.cloudfront.net/wp-content/uploads/2018/06/how-to-setup-website.jpg");
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.contain{
height:1000px;
background-color:#ccc;
font-size:36px;
padding:24px;
}
Html goes here...
<div class="navbar">
Home
News
Contact
</div>
<div class="main">
<div class="parallax"></div>
<div class="contain">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</div>
Codepen example you can check it from here
background: transparent url(http://www.server.com/blue/br-banner11.jpg) 0% 0%/100% 70% no-repeat fixed;
i have fixed the background attachment by adding like this.
I'm working in visual studio with the following code,
however, the URL images refuse to center in the columns like the h2 tags did.
ive tried multiple options such as
background-image: url('http://i59.tinypic.com/314uzyb.jpg');
background-position: center center;
background-repeat: no-repeat;
also
background: url('http://i59.tinypic.com/314uzyb.jpg') center center;
background-repeat: no-repeat;
here is what it currently looks like. As you can see, my h2 tags are centered with the columns. however, the images are still left bound.
here is the full section of code:
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
#*EDIT________________BUTTON1 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*#
<style type="text/css">
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
background-repeat: no-repeat;
}
.urlImg1:hover {
background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}
</style>
#*END BUTTON#1_____________________________________*#
</div>
<div class="col-md-4">
<h2 style="text-align: center;">Version 2.0</h2>
#*EDIT________________BUTTON2 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*#
<style type="text/css">
.urlImg2 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://i59.tinypic.com/314uzyb.jpg');
background-repeat: no-repeat;
}
.urlImg2:hover {
background-image: url('http://i60.tinypic.com/rmp4pv.jpg');
}
</style>
#*END BUTTON#2_____________________________________*#
</div>
It's because you're trying to center the image while the element is as wide as the image. In other words, the image is centered it's just that the element is as wide as the image which makes it appear not centered.
Examples
http://jsfiddle.net/ey0upzw1/
width: 500px; /* Equal to col width */
http://jsfiddle.net/ey0upzw1/1/
width: 200px; /* Not equal to col width */
Solutions
Settings the image to margin: auto.
Adding text-align: center to col-4 instead of only on the h2, you also have to set the image to inline-block instead of block.
You need to center the link.
Since it has a defined width, you can do that with margin:auto.
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
background-repeat: no-repeat;
margin: auto;
}
.urlImg1:hover {
background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
</div>
I am trying out responsive layout with 100% div wrapper and then placing a background image with text above and below it.
Unable to get it to display.
Looking to get the image to resize with browser window.
What am I doing wrong?
.wrapper {
width: 100%;
}
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
.text {
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/
Looks like you need to give height and width to your .image element. As well as a height to your wrapping div.
u need to set the content in middle div or give height. because initial div does nt have any height so how can u see the background??
check the fiddle-
--HTML--
<div class="wrapper">
<div class="text">Give the height to below div!</div>
<div class="image"></div>
<div class="text">So, here u have ur photo</div>
</div>
--CSS--
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
height:100px;
}
You're .image is actually 0px heigh, that's why the image is not displayed.
Check out this :
just moved the .image code into the .text code :
.text {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/1/
Edit :
.image {
height: 30px;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
http://jsfiddle.net/f5F6T/3/
This question already has answers here:
Vertically center text in a 100% height div?
(13 answers)
Closed 8 years ago.
My div height is 100%, but when I do this I don't know how I can vertically center a P-tag in the center.
How do I do this?
HTML:
<div>
<p>This text has to be vertically centered.</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
background: url(http://www.windsim.com/images/sky/sky_107.bmp) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
font-family: "Times New Roman", Times, serif;
color: black;
text-align: center;
font-size: 65px;
}
One way is to use the method outlined below, note that the body & html styles are optional, used to create a better illustration in the provided fiddle.
The crux is the fact the <p> will need to be contained within a parent element, and both will need the styles outlined below.
Fiddle
HTML
<div>
<p>text</p>
</div>
CSS
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
div {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
p {
display: table-cell;
vertical-align: middle;
}
I'd also recommend you have a look at some of the alternative approaches shown here
This is my website coding and I am already running into problems, please help!
This is my CSS style sheet:
.center {
position: absolute;
left: 50%;
}
body
{
background-color: #45a8e1;
background-image:url('images/background.png');
background-repeat:repeat-x;
}
And then here is the HTML:
<body>
<div id="header" class="center">
<img src="images/header.png">
</div>
</body>
The final results are coming okay but the page is extremely wide. I am trying to fit my background image in the view-port (page). Also, I want to center my div in the center which doesn't seem to be working since the page is so wide.
Use this css:
.center {
display:inline-block;
margin: 0 auto;
}
body
{
width: 100%;
text-align: center;
background-color: #45a8e1;
background:url('images/background.png');
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
background-repeat:repeat-x;
}
Note: background-size is not supported in IE8 and below.
Try this -jsFiddle
#header {
background: url('/*yourImageHere*/') repeat-x center;
height:200px;
width:100%;
}