So I am using unsplash for some images for my html page. Whenever I am including the backgground url I am not seeing it in my html page. I am receiving my images from https://unsplash.com/
I am just finding a picture right click copy image url and pasteing it into my body background url but I am not seeing any image background what am I doing wrong?
body {
background: url(https://unsplash.com/?photo=vZlTg_McCDo);
background-size: cover;
}
#content {
text-align: center;
padding-top: 25%;
}
Use background-image: instead of background:
According to their API documentation, your image URL should be of the following syntax
https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT}
Here is the modified form of the code in your question
body {
background: url(https://source.unsplash.com/vZlTg_McCDo/1600x900);
background-size: cover;
}
#content {
text-align: center;
padding-top: 25%;
}
Related
I have a design made with figma:
I have the shapes svg, I want to create the same design to be a background for my website.
Is it possible to do with css?
SVGs are a valid file type for the CSS url function.
html, body {
height: 100%;
}
body {
margin: 0;
background: url(https://upload.wikimedia.org/wikipedia/commons/e/ef/Stack_Overflow_icon.svg);
background-size: contain;
background-repeat: no-repeat;
}
I am coding my website on CargoCollective. I wanted the home page to have a different background image than the rest, to be precise I wanted it to have a full-scale GIF, while the other pages should only have a background color. I did find the CSS code for the full-scale background, but the problem is that when I go first to the homepage and then to the other pages through the links of the sidebar, the background image remains, instead of turning to background-color. The weird fact is that whenever I refresh the pages or directly go to them (without passing from the homepage), that background image doesn't show up and it is the color I chose. What is the problem?
body {
background-color:#ffe0e0!important;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
body.home {
background: url(payload498.cargocollective.com/1/22/724019/12271389/gif14.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.pages {
background-color: #ffe0e0!important;
}
One way is to simply add the code inline on your home page:
<body style="url(background:url(myGif.gif) no-repeat 0 0;background-size: cover;"/>
A second way is to overwrite the css with javascript/jQuery when you load your home page:
$('body').css({'background-image': 'url(myGif.gif)', 'background-size':'cover'});
A third way is to simply add a full screen div with the background attached:
html,body{height:100%;padding:0;margin:0;}
body{
background:#000;
}
#coverDiv{
height:100%;
width:100%;
background:url(https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif);
background-size:cover;
}
<div id="coverDiv">
This div goes on my home page only.
</div>
Try adding this class to your style sheet. It will cover the case where you're navigating from your home page to another page. The rule for css is that the most specific class/selector wins in priority, the problem you were having is that body is more generic than body.home also it needs to be the same attribute, so background instead of background-color.
body.home.open {
background: #ffe0e0;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
Hi guys I'm using stellar.js and it is working quiet well for desktop devices. But on mobile devices the background-image will be displayed only a part of it. It is not showing the whole image but the left corner of the image. The problem must be the css code. But I don't see it. Thanks for the help guys!
My css looks like:
.intro-section {
padding: 150px 0px;
text-align: center;
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
background-position: center center;
background-size: cover;
background-image: url(../images/frederick_meseck_wood_logo.png);
background-repeat: no-repeat;
}
#media(min-width:768px) {
.intro-section {
min-height: 100%;
}
}
Try this in your media query:
#media(min-width:768px) {
.intro-section {
background-attachment: inherit !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
The first background-size parameter is the width, you can increase this value when going to smaller devices (I recommend this)
On my website I have included a background (on the contact page). However when I put in the background it does not cover the header. It has done it on the main page but not on the contact page? I have tried to use
#siteWrapper{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
So here, it puts the background in and it fits it to the screen with background-size: 100%; but this has only put it over the content. I have tried to put the background on the body however that has put it behind the content. So the main goal is to try and include the background into the header as well as the content (like the home page). - Thanks
Try setting the background image on the #site element instead.
Solution #1:
You're using position: relative for your header on your Contact page, but absolute on your main page.
Use this CSS for all page but homepage:
header {
position: absolute;
top: 0;
left: 0;
background: none;
}
#siteWrapper {
padding-top: 106px; /* leave some space for header */
}
Solution #2:
Move your background image on #site, and remove black backgrounds:
#site {
position: relative;
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
header,
#siteWrapper {
background: none;
}
Sidenotes:
Be careful, the Submit button may appears exactly where there's a lightning area in your background image, making it unreadable:
CSS changes:
//Change this #site css to
#site {
background: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png") repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
position: relative;
}
//Remove this below class css
.collection-545e428fe4b0f79db6910e91 #siteWrapper {
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
//remover background-color css in below two section "background-color: #100806"
siteWrapper{background-color: #100806;}
body.transparent-header:not(.has-banner-image) #header{ background-color: #100806;}
#site{
background-image: url("http://static.squarespace.com/static/545d45afe4b08eea0ac65e7a/t/54612b8ae4b0ca233d43bdee/1415654282657/Website%20Background%20Trees.png");
background-repeat: no-repeat;
background-size: 100%;
}
Remove header from:
body.transparent-header:not(.has-banner-image) #header {
background-color: #100806;
position: relative;
} //site.css line 10