I'm trying to add a background-image to a div at the top of the webpage and i want it to be responsive as well. i got the code for a hero image from w3school and i did it exactly as shown but still the image doesn't show up. i'm 100% sure that the path for the image is correct as i've used it multiple times on the same page and it works just fine. i'll provide all the info below, any hep would be hugely appreciated.
Html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kendrick 🔥</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="body-container">
<div class="navbar">
Kendrick Lamar
</div>
<div class="kendrick"></div>
</body>
</html>
CSS:
#viewport {
width: device-width ;
zoom: 1.0 ;
}
html, body{
height: 100%;
margin: 0;
background-color: #fdfcfa;
}
.body-container {
min-height: 100%;
}
.navbar{
height: auto;
background-color: #1c2120;
}
.navbar a{
color: #FBFBFB;
text-decoration: none;
text-transform: uppercase;
width: auto;
margin: auto;
font-size: 3.5em;
font-family: fantasy;
}
.kendrick {
background-image: url("/images/kendrick!.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
Related
I'm a beginner-casual, web developer, I want to surround my menu with a background image, I've tried to do it by myself, but still, it's shows the default white background, can someone please help me out?
Here is my CSS script:
body {
background-image: url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.bonappetit.com%2Fstory%2Fhow-to-buy-coffee-beans&psig=AOvVaw2rGyzxjYnZTpqbQELy-_qH&ust=1668543336904000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj8h7q-rvsCFQAAAAAdAAAAABAD);
font-family: sans-serif;
padding: 20px;
}
.menu {
max-width: 500px;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: burlywood;
padding: 10px;
}
what is the problem in here is your link, but here you have a body with an image background, you just change the image for any that you want, make sure that it is the image link or the image path
<!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>
</head>
<body>
a
</body>
</html>
<style>
body {
background-image: url(https://th.bing.com/th/id/R.5e6520289b44e11a9e74363c18ce3ee1?rik=0NsMGzWCfTqnyA&riu=http%3a%2f%2fcdn.wallpapersafari.com%2f34%2f38%2ffNuD4F.jpg&ehk=rWygJFVz8poo%2buNiEqsllRqA4jP9BCE6VYuBOMM03GA%3d&risl=&pid=ImgRaw&r=0);
font-family: sans-serif;
padding: 20px;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
/* this is to make the image fits all the screen doesnt matter the image size, but it will cut the image
background-size: cover; */
}
</style>
Add quote " "
.menu {
max-width: 500px;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: burlywood;
padding: 10px;
}
body{
background: url("https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg?w=2000");
font-family: sans-serif;
padding: 20px;
}
The image you want to use, save it locally and you can change the CSS to `background-image: url(image.jpg);
So I'm having a hard time making an image with a psuedo element
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
And Here's the CSS:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('./Path\ 14#2x.png');
position: absolute;
display: inline-block;
background-size: 30% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
Here's how the code looks when you see it:
I want the image to take 100% of the width instead of repeating like that maybe the image is too small but I can't find a bigger image
Here's the image
THANK YOU IN ADVANCE
Try this, I added background-repeat: no-repeat; and then change the background size to background-size: 100% 100%;
See working example here:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('https://i.imgur.com/TEKMxzx.png');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
background-size: 100% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
Here's my code. I'm a beginner so please let me know if I have any errors.
I need to have the text resize and move when the browser is scaled. As of now it just stays and doesn't move no matter the size. I've tried a media query's but they haven't worked.
html{
background-image: url(images/CBG1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1{
text-align: -webkit-center;
color: #FF6633;
position: absolute;
margin: 0px;
margin-left: 650px;
margin-top: 314px;
width: auto;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Hoax Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="uft-8">
<link rel="stylesheet" href="work.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>WORK</h1>
</div>
</div>
</body>
</html>
You need to change the alignment and width for h1 as below
h1 {
color: #FF6633;
position: absolute;
text-align: center;
margin-left: auto;
margin-top: 314px;
width: 100%;
height: auto;
}
I'm currently recreating the Google homepage for Odin and trying to set the logo as a background image. Whenever I put the background image and URL in the body for CSS - the logo will show. But when I then copy and paste the exact lines into logo, the image doesn't show up at all!
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#logo {
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png");
background-size: 272px 92px;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Google</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
Any ideas where I am going wrong?
There is no content in the anchor tag.
If you do not want to give any content inside anchor tag you should make display block and provide and height Or you can also use inline-block providing width and height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Google</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#logo {
background: url("imgs/google-logo.png");
background-size: 272px 92px;
background-repeat: no-repeat;
display: block;
height: 300px;
}
Anchors (a tag) are inline elements by default, i.e. the size is auto generated based on its contents. Since your tag is empty there's no size and nothing renders.
You can change the display to block or inline-block (read more about the both here) and provide width and height.
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
#logo {
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png");
background-size: 272px 92px;
background-repeat: no-repeat;
display: block;
width: 272px;
height: 92px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Google</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
I am trying to make a mobile page responsive. But keep running into issues where the page don't show up properly on different devices.
Here is my HTML code :
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width/" >
<title></title>
<link href="css/book.css" rel="stylesheet" />
<style type="text/css">
#page {
background-image: url("images/image-000.jpg");
}
</style>
</head>
<body>
<div id="page">
</div>
</body>
</html>
and here is my CSS code:
body {
background-color: #333;
padding: 0px;
margin:0px;
font-family: Helvetica;
font-size: 14px;
line-height: 1.2;
}
#page {
height: 1024px;
width: 768px;
background-color: #FFF;
position: relative;
/* background-image: url("images/img001.png"); - Set in the page header */
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0px;
}