I have a problem with background-image property in one of my sections. Here is the HTML code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<title>Elipsis</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<header id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</header>
<main>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And CSS:
#intro {
background-image: url(.../.../img/intro.png);
background-image: url(intro.png);
background-image: url(".../.../img/intro.png");
background-image: url("intro.png");
}
Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.
The way you wrote that CSS rule only the very last line will apply, which is
background-image: url("intro.png");
(it overwrites the other lines before it)
So you probably want to change that to
#intro {
background-image: url("../img/intro.png");
height: 300px; /*whatever value, if there is no content */
}
Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.
Try this.
background-image: url('../img/intro.png');
I usually drag and drop that image to get the proper path. I hope this helps.
Related
I am trying to set a maximum height for a banner I am creating in bootstrap5 like this..
.banner {
background: red;
max-height: 50px;
}
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container d-flex banner">
<div class="col-2">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-10">
This is some text for the right hand side of the banner
</div>
</div>
</body>
Why is the image breaking out of the banner? I was expecting it to resize itself proportionally because I am using img-fluid. Where am I going wrong>
img-fluid only adds max-width:100% and height:auto since your content is restricted by height and not width you need to add max-height:100%
.banner {
background: red;
max-height: 50px;
}
.img-fluid{
max-height: 100%;
}
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container d-flex banner">
<div class="col-2">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-10">
This is some text for the right hand side of the banner
</div>
</div>
</body>
Hello I use the bootstrap jumbotron class and whenever the screen goes below 500 pixels I want to get padding 0 bootstrap automatically padding: 2rem 1rem; but it doesn't work if I want to change it. What is the solution? Thanks in advance for your answers.
#media (max-width: 500px) {
.jumbotron {
padding:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="berkay.css">
<link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</body>
</html>
Simply set the padding to 0 by default with p-0, or px-0 if you want to remove only the horizontal padding (py-0 for vertical). Then add a padding on larger screen, for exemple p-md-5 to have an horizontal and vertical padding from md breakpoint.
You can do it without any custom CSS.
<div class="container-fluid">
<div class="jumbotron row p-0 p-md-5" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
There you go:
#media (max-width: 500px) {
.container-fluid .row.jumbotron {
padding:0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="berkay.css">
<link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</body>
</html>
I have the following code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class1 {height: 100px; background-color: DarkSlateGrey}
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="col-xs-6">Website</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
</div>
</div>
</body>
</html>
The problems with me are:
When i do "inspect" to see the website on mobile:
-the background doesn't take all the width of mobile.
-Words "services" are overlapped, i want them to be separated with some spaces between them
How can I avoid these problems? Any help will be appreciated
Your width for each child inside the row is simply too small. For mobile size, you are setting the div to only 1/12 width of the mobile screen. You can add padding and overflow: hidden to it so it doesn't go over the desired width, but that doesn't seem ideal to me. I added a sample code based on your codes as an option for you to explore. If the screen is less than >=720px (col-md) then your first child in the row will take full width, and give more space for the rest so it looks more presentable.
.class1 {
height: 100px;
background-color: DarkSlateGrey
}
.tomato{
background: tomato;
}
.white{
background: white;
}
row div{
text-align: center
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="tomato col-xs-12 col-md-6">Website</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
</div>
</div>
</body>
</html>
My css background image shows on dreamweaver but not in my google chrome browser for some reason it just shows a white background can anyone understand why? This is my code:
about.php file
<?php
include 'secure/db_connect.php';
include 'secure/functions.php';
sec_session_start(); // Our custom secure way of starting a php session.
if(login_check($mysqli) == true) { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Referee Perception Exam</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/aboutstyle.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>title</h1>
<p>paragraph here</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Contact:</h3>
</div>
<div class="col-sm-4">
<h3>Social:</h3>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
<?php } else {
header( 'Location: http://localhost/project/index.php' ) ;
}
;?>
aboutstyle.css file
#charset "UTF-8";
body {
background-image: url("../img/pitch.jpeg");
background-color: #cccccc;
background-size:cover;
}
Guessing from the file structure I can see you might need to alter
background-image: url("../img/pitch.jpeg");
maybe to
background-image: url("../../img/pitch.jpeg");
or similar to correctly reach the image file from your stylesheet. But I can't be sure without seeing the structure. 404 errors in your browser should point you in the right direction.
I have this (using the Twitter bootstrap css sheet):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body style='padding-top:40px;'>
<div class='topbar'>
<div class='fill'>
<a class='brand' href='index.php'>BrandTest</a>
</div>
</div>
</body>
</html>
It's not showing the black bar at the top at the top.
Any ideas?
Some parts of the HTML is missing, it should look like this : http://jsfiddle.net/KajxK/
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="index.php">BrandTest</a>
</div>
</div>
</div>