I'm trying to set a full-screen background image (1366x854) with css. I've tried in many ways peeking online but I can't set my image as it is. It is possible to have it full-screen without get cut parts? The img below is just a prototype and code is really basic. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title> LIVE </title>
<link href="css/Live.css" rel="stylesheet">
</head>
<body>
</body>
</html>
body {
background: url(Live.png) no-repeat center center fixed;
background-size: contain 100% 100%;
}
Related
In my css file, I have an id named "homehero", which displays a background image.
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
In my html file, I have a div that uses this id to display the image; however, the image does not appear whatsoever.
<div id="homehero"> <!-- Home Page Image -->
<!-- <img src="images/coast.jpg" width="100%" height="100%" alt="A Sunny Coastline"> -->
<!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->
The full html file can be found here.
The full css file can be found here.
Edit:
The image is displayed when setting it as the background image for another element, it is only in this id where the issue occurs.
Please Put width and height
width:100%;
height:100vh;
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
height:100vh;
}
I would suggest below changes,
#homehero
{
background-image: url("images/coast.jpg");
width:300px;
height:300px;
background-size: cover;
background-repeat: no-repeat;
}
Where, your image will be cover and if you specifies width and height it would be good and also your image will not be repeat as no-repeat property is used.
These are a few things I recommend you try:
Try setting the background size. (Instead of %, try setting it to px.)
Most of the time, the background picture is applied, but because our div has
no dimension, we are unable to view it.
Double-check that your picture file is located in the images folder.
Check your image's extension and make sure you're using the correct one in your code.
Use the dev tools to inspect the element and see whether the background property is being overridden by another CSS rule.
If none of the above methods work, try pasting the picture's real URL by copying the image address from the internet rather than providing a folder path.
This method works 90% of the time.
i recommend to use inline scope css, i hope it works for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="#homehero {.css">
<style>
#homehero {
background-image: url("image/image.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div id="homehero">
</div>
</div>
</body>
</html>
this might be the reason why it can happen
https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=As%20Inline%20has%20the%20highest,sheets%20have%20the%20least%20priority.
It looks like you're entering the url in the background image, for background size using background-size: cover;
If your url address is correct, then try adding
width:100%;
height:100vh;
I'm trying to get an image to appear over text and it doesn't show up. It's my first time asking a question here too so sorry if it's kind of... vague?
I have a front page and I only want the top section of it to have a fixed BG picture, I will add text (profile intro) over it. I've tried the following ways but it shows up as a block to move the text underneath, disappears or just goes over the text.
I've tried making a class of the BG image to put into html div with the profile-intro class within that. It didn't work.
I tried using z-index in CSS which led to nothing.
I tried to img src the BG image into the bgimage class, and it comes up with with this in the CSS file. (I don't know how to link it.)
/*CSS Code for Cover Photo*/
.home-bg-cover-photo {
background-image: image(Dark_Eventide_Flipped_2500.jpg);
margin: -10px;
background-repeat: no-repeat;
background-position: center top;
background-size: 100%, auto;
}
<!--HTML Code for where photo appears -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="home-bg-cover-photo">
<h1> Hi, I'm sadnoodle. </h1>
<!--This is the text that appears on top of BG photo -->
</div>
</body>
</html>
NEW CODE (2nd edit)
/CSS Code for Cover Photo/
.home-bg-cover-photo {
background-image: url("images/homepage/Dark_Eventide_Flipped_2500.jpg");
margin: -10px;
background-repeat: no-repeat;
background-position: center top;
background-size: 100%, auto;
}
<!--HTML Code for where photo appears -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="home-bg-cover-photo">
<h1> Hi, I'm sadnoodle. </h1>
<!--This is the text that appears on top of BG photo -->
</div>
</body>
</html>
You need to have a url("") in your code.
background-image: url("../assets/images/image-name.jpg").
(Please be kind I'm fairly new to all this).
I've tried using cover, absolute, auto and whatever else to try and get the background to resize along with the page. Whenever I make the resize the page smaller or bigger, I'm left with a white box at the bottom:
https://imgur.com/a/KauGhfD
The only way to get the white to go away is if I make the page full size again. Here's my CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
background-repeat: no-repeat;
background-size: cover;
background-positon: absolute;
overflow: hidden;
width: 100%
top: 0;
left: 0;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
try fix this issues :
add ; after width: 100%
this property value absolute not correct background-positon: absolute;
check this link to know the correct value
https://www.w3schools.com/cssref/pr_background-position.asp
you have also a typo on positon should be background-position:
you can use this code for cover for background of page but you must keep your ratio aspect for picture
your code have two error
1- background-position:absolute is wrong
2-width:100% it is not correct because body have this properties
then you must change your code like this
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
}
body {
background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
I have these two PNG images (Image 1: eyemasktrans , Image 2:dialogue_ughhh) which I already edited in Photoshop to make them transparent. But the problem is when I try to view on Chrome, the supposed transparent images appeared to have white backgrounds. Is they any way to fix this using just HTML? Thanks in advance! Below is my current code:
Other image I use: girl_sleeping
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("girl_sleeping.jpg");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
Your eyemasktrans.png and your dialogue_ughhh.png images are fine. They have a proper alpha channel in the PNG.
I think the issue you're having is that the .parallax div is not sized corectly, and also has some weird background configurations with fixed and center, which cause it to appear like something is covering it while you scroll around the page.
I don't know what the desired effect is here, but if you size things correctly and set z-index as appropriate, you won't have a problem.
Additionally, I would suggest considering SVG for this task, since all your art is vector anyway. You'll have a much faster load time.
(Issue is reproduced here: http://jsfiddle.net/vr1qms9h/1/)
You can use the opacity attribute.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("http://thepotatoplace.ga/images/background.png");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.65;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
when zooming in and out my page Link of my page in Chrome browser the background is distorted and page looks like this Look of page after zooming in Chrome.
What can be changed in code to fix it for zooming in Chrome browser without distorting background graphic?
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page Under Construction</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background:#d7df29 url('1.jpg') center center no-repeat;
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Thank you very much!
this line says, WE CANT HELP YOU YET...
background:#d7df29 url('1.jpg') center center no-repeat;
I just read you comment, you got an image, so it will be distoring with zoom in / zoom out...it would be better to go for CSS to avoid such distorting...