my background image is not displaying at all and I can't debug it. I tried turning it into a ID, class, and so on but nothing works. Is there something I am obviously not seeing?
HTML code:
<title>Temple-Digital Designer</title>
<!--This links my bootstrap css file -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<!--This links my stylesheet from the css folder in portfolio-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--This links my jQuery file-->
<script type="text/javascript" src="./scripts/jquery-3.1.1.min.js"></script>
<div class="container-fluid header-section">
</div>
<div class="container-fluid what-i-do">
</div>
<div class="container-fluid about-me">
</div>
<div class="container-fluid contact-me">
</div>
<div class="container-fluid footer-section">
</div>
<!--Defines my javascript file(local made one) -->
<script type="text/javascript" src="./scripts/helper.js"></script>
</body>
My CSS code:
.header-section {
background-image: url('../img/pineapple.jpg');
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
Don't mind the jquery libraries, I was planning on using them later with bootstrap.
Check your path.
If path is true set background-size:cover.it may be true.
It seems, you have not set proper background path. I used online absolute path and it is working fine.
.header-section {
background-image:url('http://freedesignfile.com/upload/2014/07/Shiny-eco-style-green-background-vector-01.jpg');
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
<title>Temple-Digital Designer</title>
<!--This links my bootstrap css file -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<!--This links my stylesheet from the css folder in portfolio-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--This links my jQuery file-->
<script type="text/javascript" src="./scripts/jquery-3.1.1.min.js"></script>
<div class="container-fluid header-section">
</div>
<div class="container-fluid what-i-do">
</div>
<div class="container-fluid about-me">
</div>
<div class="container-fluid contact-me">
</div>
<div class="container-fluid footer-section">
</div>
<!--Defines my javascript file(local made one) -->
<script type="text/javascript" src="./scripts/helper.js"></script>
</body>
and you can see codepen link here
Related
I've been trying to get my rows and columns to appear over my background image. I've been struggling with this for a while. Any help would be greatly appreciated!
I am also quite new to this so, if it is simple I've yet to find it XD
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="about-us" class="">
<img src="https://via.placeholder.com/1920x618.png" alt="">
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
</html>
First you need to change Image path i have changed image path.
Give a backgroud-image to parent div in css.
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<style type="text/css">
#about-us{
background-image: url('https://previews.123rf.com/images/melpomen/melpomen1904/melpomen190400312/120268255-e-learning-concept-with-person-using-a-laptop-on-a-white-table.jpg?fj=1');
}
</style>
</head>
<body>
<a href="https://placeholder.com">
<div id="about-us" class="p-5">
<div class="container-md">
<div class="row justify-content-center" style=" position: relative;">
<div class="col-4 text-light about-text-header">
First Column
</div>
<div class="col-4 text-light ">
Second Column
</div>
</div>
</div>
</div>
</a>
</body>
</html>
You can put image as background for your block using CSS. Inside your style.css file:
#about-us {
background-image: url('https://via.placeholder.com/1920x618.png');
}
There are also CSS properties to set background image position, size etc.
You can find more here
Edit: According to you comment if you want to achieve this design:
HTML:
<body>
<!-- Top image GTA, there is no text so it can be <img> tag -->
<div id="hero-img">
<img src="./yourimg.png" alt="">
</div>
<!-- About us section, with car in background -->
<div id="about-us">
<!-- Your regular columns and content -->
<div class="container-md">
<div class="row justify-content-center">
<div class="col-4 about-text-header">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
</div>
</body>
CSS:
#hero-img{
/* to remove space between images, because car image has this wave and page background would be visable */
margin-bottom: -50px;
}
#hero-img img{
object-fit: cover;
width: 100%
height: 600px;
}
#about-us{
background-image: url('./yourCarImage.png');
background-position: center;
background-size: cover;
/* probably padding needed */
padding: 100px 0;
}
This should work in general, adjust it for your needs.
The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.
I am attempting to select header-logo I tried the following selector suggested by css selector
body > div > div.header-logo
{
background-image: url("logo.png");
}
For the html of the below
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
But when I view it in chrome it is showing unresolved
you don't need the > sign to track the element you just use space when its element and use . if its sub element
example : body div.header-logo
you can find useful tutorial for css here
div>div.header-logo
{
background-image: url("https://tproger.ru/wp-content/uploads/2015/03/stack-overflow-logo-2.png");
width: 720px;
height: 270px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
</div>
</body>
</html>
but, if you wont add a logo, correct do this:
<div class="header-logo">
<img src="logo.png" alt="It's a logo">
</div>
I am trying to make the icon, text and button sit in the center of the div vertically.
So, tried to use bootstrap class well, but still not working. Could someone help me on that?
Here is the image to reference:
Css part:
.brl-icon-size { font-size: 2.5em; }
Here is all my code:
<html>
<head>
<title>Index file</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
Sidebar
</div>
<div class="col-md-10 col-md-offset-2 content">
<div class="well well-lg">
<span class="glyphicon glyphicon-file brl-icon-size"></span>
<span>New Message</span>
<div class="pull-right">
Save draft
<button>Publish</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.valign-top {
vertical-align:top;
}
HTML:
<div class="pull-right">
<span class="valign-top">Save draft</span>
<button>Publish</button>
</div>
Online Demo 1
EDIT 1:
In case you use different font-size properties on aligned elements, then you should specify line-height property.
Online Demo 2
EDIT 2:
It's easier and more correct to just wrap you icon into small tag:
<small></small>
Or simply using custom modifier class:
.icon-any-size {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
I have the following issue.
I have a headline in a jumbotron with Boostrap. Now I want to dock a image centered to the bottom.
I tried some other ways shown on stackoverflow but nothing seems to work.
Here is the code: http://jsfiddle.net/S298j/3/
Code Issue:
<div class="jumbotron-main">
<h1>
HERE IS MY HEADLINE
</h1><br>
<h2>
HERE IS MY SUB HEADLINE
</h2>
<img src="imageskIsFb.png"/>
</div>
Try this:
Wrap your img in a container like so, with the class of "center-block".
<div class="center-block">
<img src="http://i.epvpimg.com/kIsFb.png" />
</div>
This will center align the img below the heading text.
Next add some custom styling. This code gets you close. Play with the dimensions.
.jumbotron-main img {
width: 100%;
max-width: 600px;
}
<html>
<title>test</title>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron-head {
background-color: #242729;
height: 80px;
margin: auto;
background-size: cover;
}
</style>
</head>
<body style="background-color: #C6491A;">
<div class="jumbotron-head">
<h1 class="text-center" style="font-size:80px;color:white;">Guild Hosting</h1>
</div>
<div class="container">
<h1 class="text-center"style="color:white;">HERE IS MY HEADLINE</h1>
<h2 class="text-center"style="color:white;">HERE IS MY SUB HEADLINE</h2>
<img src="http://i.epvpimg.com/kIsFb.png" style="padding-top:170px;padding-right:50px;" align="middle"/>
</div>
</body>
</html>