I am trying to make my first simple web page.
I am using Visual Studio Code and from time to time it does not work as it should - when I save my progress web page does not show changes but when I restart all (VSC and web page) it works but sometimes I must do this several times. So I do not know why it is happening.
When I reached the lesson about creating a landing page I encountered a problem with placing the background color. I already have my wallpaper and would like to put semi-alpha black background on it but somehow I can't.
Below you can see my current code in HTML and CSS:
.landing-page {
width: 100vw;
height: 100vh;
background-image: url('bg.jpg');
background-position: center;
background-size: cover;
}
.landing-page-shadow {
width: 100%;
height: 100%;
background-color: rgba(0,0,0, .3);
}
<body>
<nav>
<div class="container">
<a class="nav-logo" href="index.html">nazwa firmy</a>
<div class="nav-links">
o nas
oferta
kontakt
</div>
</div>
</nav>
<section class="landing-page">
<div class="landing-page-shadow"></div>
</section>
</body>
The black background doesn't show at all even before I applied alpha.
It is also interesting that when I put my code into CodePen it shows all correctly. Hmmm...
Related
I am trying to place a background image to a tag, when I set the image link in background-image:url it is not showing me the image as background. This is my code, what could I be doing wrong?
<a
href="#"
data-toggle="lightbox"
title="Instagram"
style="
width: 400px;
height: 400px;
background-image: url('https://scontent-atl3-2.cdninstagram.com/v/t51.2885-15/275180538_484682353010222_2402478995051705385_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent-atl3-2.cdninstagram.com&_nc_cat=102&_nc_ohc=fTObVsU65g8AX8x2Wuy&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-oNSMzXpDYHz0_nSlywYBoscNl37e8kWF8dEe3-4zxWA&oe=625818CB&_nc_sid=7bff83') !important;
"
>
<div class="photo-box-content">
<span>Instagram223424</span>
</div>
</a>
I Assume you are trying to load image from instagram or facebook content because of the URL. It is not allowed to be load like that, try saving the image locally that's the quickest solution.
I will only recommend you to assign the background image locally. First, download the image and then, add it to your code main file. The main problem while you import the url is, if the image of the url is deleted by any reasons, your webpage will not display the image anymore. So, you should download it and then add it to your code main file. Then, rename the picture to a short name (recommended). Then you should code like this 👇
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
width: 100%;
height: 100vh;
/*locally from the device*/
background: url('example.jpg');
/*to adjust the image perfectly according to the device*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<body>
<div class="main">
<div class="body">
<h2>This is a heading</h2>
</div>
</div>
</body>
This is the method which I was following for the past few months. Hope it will help you ☺.
I found the same reference with this question, here's the link:
Visit instagram style explore page image list with CSS
I'm using Vs code with live server extension But When I open the HTML file or on GitHub pages The out does not show the background image
Overall Every Style I applied is working,
but only the background image of the
.left
div inside
.home
section
I have tried using CSS instead of SCSS
I have this snippet
Snippet won't work
as the image is local and if I add external URL then It works
.home .left {
width: 100%;
height: 100vh;
background: url("media/bgH.png") no-repeat center fixed;
}
<HTML>
<head>
</head>
<body>
<section id="home" class="home">
<div class="left">
<div class="container">
</body>
<HTML>
I tired swapping
background: url("media/bgH.png") no-repeat center fixed
for
background: url("./../../media/bgH.png")
and also to
background: url("../../media/bgH.png")
This link is for the GitHub Page
maybe this link will help
HERE!
This The folder structure
HERE!
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
Details : Using Atom File Editor with Mac OS X, Making a new site on localhost and after saving it I check changes on chrome browser. Right now i have come across a problem which causes the image to not show up on the website while i was trying to set background image of a section tag in CSS.
Problem : I am trying to use the stellar.js parallax plugin and for that i need to set the background property of the section tag to an image of my choice. The problem is that when i use "background : url(parallax1.png);" the image does not show up on the website and only a white blank space is shown.
HTML File :
<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->
CSS File :
.pic1
{
background : url(parallax1.png);
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
Points You Should Know :
the image parallax1.png is in the same directory and i have checked the spelling, which is correct.
I have also tried using background-image: instead of background: .
If i use < img src="parallax.png" /> the image shows up perfectly
i have tried to encase parallax.png in '' as well as "".
Any help would be appreciated,
Thanks.
Generally, you should have some content within the section tag or you can set in .pic1 class
min-height:200px;
Try background : url("parallax1.png");
Read more here
CSS background Property
take a look
html
<section class="parallax1 pic1">
</section>
css
.pic1
{
background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
width: 100px;
height: 32px;
border:1px solid #000;
}
.parallaxcontent
{
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
background-size : cover;
width: 100%;
height: auto;
}
working Fiddle
I had a simple html app that used a background cover image. The following code worked fine.
body{
width: 100%;
height: 100%;
margin: 0 0;
padding: 0 0;
}
.mainBody{
width:100%;
height: 100%;
background: url("/images/background.jpg") no-repeat fixed center;
background-size: cover;
margin: 0 0;
padding: 0 0;
}
However, when i created a simple angular app w/bootstrap and used the same code, the mainBody div lost its height component and the image fails to show.
The html is simple and straightforward:
index.html
<body ng-app="testApp">
<div ui-view=""></div>
root.html
<div class="mainBody">
<div class="navTitle">
<span class="title">Recordings</span>
</div>
<div class="navMenu">
<!-- <span class="fa fa-twitter menu twitter"></span> -->
<span class="menu">About</span>
<span class="menu">Podcasts</span>
<span class="menu">Support</span>
</div>
</div>
The same root.html works in a simple html file. And I've debugged the angular app to see if there are any additional css being added for body and mainBody and have not found any. Your help would be appreciated!
You have not mentioned the order of adding your own style-sheet in the html. If you have added the bootstrap file below your custom css file then the problem may be occurred due to the over-right issue of css.
So first add your bootstrap file and then add your custom css.
If you have already done with this then please provide your html div.
Try using this code
html{
height: 100%;
}
body {
min-height: 100%;
}
body finds it's parent div that is html. So the html needs a proper height.