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);
Related
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;
}
I've browsed a whole lot of posts on here, some of which relate more closely to my issue than others; yet I've still to find a solution/explanation. -- Sorry if I've missed the answer somewhere!
Here goes.
I have this issue on with regards to a hero image on a site I'm creating, that I'd love to see resolved before I venture any further.
My issue is, that currently, on zoom, it goes towards the upper left corner, and adds a horizontal scrollbar at the bottom.
Ideally I'd like for the hero image to be centered when I zoom in with the browser, and for there to be no horizontal scrollbar.
Hopefully there's a simple fix, or something obvious I'm missing, and you lot could provide my feeble mind with an explanation as to what exactly it is that I'm not getting.
Below is provided the HTML and CSS I have so far. - Thanks in advance!
* {
margin: 0;
padding: 0;
font-size: 10px;
}
.hero_Image {
height: 1080px;
width: 1920px;
background-image: url("https://i.imgur.com/NVdZ3Ja.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px solid lightgray;
margin: 0 auto;
position: relative;
box-sizing: border-box
}
.preview {
height: 50rem;
width: 1920px;
margin-left: 10%;
background: green;
margin: 0 auto;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>
to fix your problem add this css to your file and your problem is that you let the width of sections overflowing
.hero_Image {
height: 500px;
width: 500px;
background-image: url(https://images.homedepot-static.com/productImages/6c9e2ae9-7592-4de9-8ca9-2692bb908be7/svn/commercial-electric-specialty-meters-ms602h-64_1000.jpg);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
border-bottom: 1px solid lightgray;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
}
.preview {
height: 500px;
width: 500px;
margin-left: 10%;
background: green;
margin: 0 auto;
overflow:hidden;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</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;
}
What I'm trying to accomplish is on mobile I want my header to have a 3% margin on the left and a 3% margin on the right. I guess you can say what I have done has worked but its creating a side scroll bar.
Here is my code.
\
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 64px;
background-color: #ECEFF1;
}
.content {
height: auto;
margin: auto;
width: 1100px;
overflow: hidden;
}
.logo {
float: left;
width: 150px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: white;
}
.btn {
float: right;
width: 160px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: #4285f4;
}
#media only screen and (max-width:1110px) {
.header {
width: 100%;
}
.content {
width: 100%;
margin-left: 3%;
margin-right: 3%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="content">
<div class="logo"></div>
<div class="btn"></div>
</div>
</header>
</body>
</html>
I've been dealing with this for quite some time now and can't seem to figure out why the scroll bar is there. I'm sure it's something small and I'm just overlooking it.
Thanks in advance !
Try changing width: 100%; to width: auto; for .content in the media query.
The reason is 100% + 3% + 3% > 100% total width, whereas auto will calculate the available space automatically.
Add the attribute box-sizing:border-box; to your content div and it will fix the problem.
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Link to w3 box sizing explanation: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
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;
}