I am creating a website in Django. I downloaded a html homepage template design on the internet that I want to improve upon and use for my website. since its been designed it came with a CSS file. now when I try to make the improvements specifically add a background image in one of the elements. it refuses to do so. the other elements respond to the CSS style but the background image refuses too. since I'm using Django i had to set up the static files and 'collect static' which I did but when I set that those pics to my background image in my CSS it refuses. here is the html file & css.
html
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Home </title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<!-- Boxicons CDN Link -->
<link href=
'https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css'
rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<section class="home-section">
<div class="main" >
</div>
the class="main" is where I'm trying to add the background-image too.
CSS
.home-section .main{
background-image: url('https://www.pexels.com/photo/singer-
singing-on-stage-beside-guitar-player-and-bass-player-
167636/');
padding: auto;
margin: auto;
background-size: 50pc;
}
#media (max-width: 700px) {
.sidebar li .tooltip{
display: none;
}
}
I've tried everything but it refuses to acquis. Thanks in advance.
Load Static or have non-empty div
Without knowing what more code you have I can only guess that perhaps you forgot to load static files by including this on the top of your html file:
{% load static %}
Second, until the div is filled with something, it has no dimensions, so the image would occupy no space either.
Related
So, I'm currently learning #html & #css and I'm on the topic of relational selectors.
In the example, the code below is suppose to display a web page with orange text. The
text is still black even after trying several variations. Can someone help?
index.html
<!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>
<section id="products">
<p>Lorem ipsum dolor sit.</p>
</section>
</body>
</html>
styles.css
body {
margin: 10px;
}
#products p {
color: orange;
}
It works just fine,but you have to link the css file using tag
<link rel="stylesheet" href="style.css">
You have to connect your CSS file to the HTML by linking to it in the <head>, like so:
<link rel="stylesheet" href="./style.css" />
(and if the CSS file is in a folder, it will be ./foldername/style.css)
There are three ways you can implement style to HTML documents:
External CSS
Internal CSS
Inline CSS
You could include your style code in the document (Internal CSS). To do so you would need to enclose it in style tags like this:
<style>
body {
margin: 10px;
}
#products p {
color: orange;
}
</style>
Hide that element in your , or at the end of your , and you should be fine. Generally, it's frowned upon to use Internal or Inline CSS, but you can do if you want to!
I'm new to HTML and CSS and I'm trying to make a website using springboot but I can't add a background image to it. this is how I'm doing it:
body {
background-image: url(images/background.jpg);
}
I've also tried using src/main/java/images/background.jpg, still doesnt work.
(HTML files are in src/main/resources/templates folder and CSS files in src/main/resources/static folder)
Did i import the image correctly? Thank you for help
This is my HTML code (it's pretty bad, I can't really use it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/style.css" rel="stylesheet">
<title>Catering Ristorazione C.S.L</title>
</head>
<body>
<div>
<h1> <strong><em>Catering Ristorazione C.S.L</em></strong></h1>
<div> <hr>
<a th:href="#{/elencochefs}" >Elenco degli chef</a>
</div>
<div>
<a th:href="#{/elencobuffets}" >Elenco dei buffet</a>
</div>
</hr>
</div>
</body>
</html>
Move your folder images to /src/main/resources/static
Also, you should modify your stylesheet to start the background-url with /.
body {
background-image: url(/images/background.jpg);
}
So as you can see here, I have used image tag to add an SVG that in my github repository, but I am unable to see it, when I turn on the live preview it just shows an image icon in the place of my actual logo, I have also tried to add the file using CSS but it has the same problem.
https://github.com/Alucard2169/Third.git here is the link to my GITHUB repo, as you can see I have put all my media file in side the media folder.
.main_heading::before {
content: url(media/logo.svg);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="media/logo.svg">
</div>
<h1 class="main_heading">
A history of everything you copy
</h1>
<article class="main_content">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<bottoom class="ios">
Download for iOS
</bottoom>
<bottom class="mac">
Download for Mac
</bottom>
</header>
</body>
</html>
When linking a file in css through url(), you have to give ./. This is shown below, but this only works if your html file is outside the media folder.
.main_heading::before {
content: url(./media/logo.svg);
display: block;
}
Your img tag should have a self closing tag like this: <img src="./logo.png" />.
But in this case, both your html and img files should be in same folder.
I am working on a webpage using Bootstrap 4 and after fixing the appearance of a horizontal scrollbar on mobile devices by adding overflow-x:hidden to the html tag I noticed that the main y scrollbar looked weird and was not clickable most of the time anymore (normally it can be pulled with the left mouse button, but it does not react to clicks now. It does, however, register clicks on content that is behind the scrollbar!).
It has definitely not been like this for long, but I have not the faintest idea what caused this change since I did not touch any z-index or scrollbar settings...
I am using Chrome and it should display the standard, unstyled scrollbar, which does not look like this.
Can anyone tell me what happened and how to fix it?!
Edit:
Since it happens across all pages equally the error should be somewhere in the main template and since most of that gets overwritten it is most probably in the header. Maybe someone can spot the mistake:
<!doctype html>
<html lang="en" style="overflow-x: hidden;">
<head>
{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="icon" href="{% static 'bilder/icons/019-rocket.svg' %}">
<title>Online-Nachhilfe</title>
<style>
body {
margin:0;padding:0;
background-image: url({% static 'bilder/Rastergrafik.png' %});
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-x: hidden !important;
position:relative;
z-index:0;
min-height: 101vh;
text-align: center;
}
</style>
{% block head %}
{% endblock %}
</head>
It turned out not to be a code problem after all and the browser seemingly just decided to show me the mobile scrollbar version instead of the normal one for no apparent reason. It can be fixed by entering the site from a clean tab or deleting browser cache and restarting chrome. The code seems to be working perfectly 100%!
I'm new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full background image. Help please..
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
body {
background-image: url('your_img_path');
margin: 0;
}
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes.
To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background' attribute.
I have provided the sample code. Have a Look.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>
</head>
<body background="~/Content/Images/sahb.png">
</body>
</html>
Regards!
SAHB
In case if you want change background in a particular View just add thise code
#section head{
<style type="text/css">
body {
background-image: url('/Images/paper.jpg');
margin: 0;
}
</style>
}
But dont forget in Layout of this View add following line
<head>
#RenderSection("head", required: false)
</head>
If you want it on all pages use Shared/_Layout.cshtml file
and change body tag similar to
Probably I would put only on the Home/Index.cshtml page so it appears only on the home page
To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows
<body id="HomepageBody" >
and change it in the Content/site.css file add
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
That would make it work across popular browsers like Chrome.
if you wanna use background-image: url('');
just do not use ~ symbol
use this code in cshtml page to insert background image on entire screen of your div section
<div style="background-image: url('/Areas/Admin/Content/Image/OIP7.jpg'); background-repeat:no-repeat; background-size:100% 100%">
one more thing ~ is not working in Url. start your image address with forward slash
/ link this '/Areas/Admin/Content/Image/OIP7.jpg'
In Index.cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body
</body>
</html>
in Main.css:
body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
It is very simple just use a css property background image on that div or that section you want.
<div style="background-image: url('/Content/images/image_2.jpg');"></div>
If your image is not displaying, you may have to add ~ tilde sign to the URL
Example :
<div style="background-image: url('~/Content/images/image_2.jpg');"></div>