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%!
Related
I do not understand WHAT I am doing wrong. I'm new to this and just trying to follow this online course...
So I have my HTML file and all I'm trying to do is shove my tiny bit of CSS into a separate .css file.
When I use < link rel="stylesheet" href="./Documents/Untitled1.css > in the head tag of my HTML file, referring to my CSS code that just states a basic CSS, the background does not change...
HOWEVER, if I use the style tag inside my head tag... it works JUST fine using my CSS code.
body {
background-image: url("./images/rain.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Please someone tell me what I'm doing wrong...
<style>
body{
background-image: url('https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
<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>
<link rel="stylesheet" href="stack.css">
</head>
<body>
</body>
I think your CSS href path I guess !! not sure you can check the above code
Name your styles file "style.css", put style.css to the same folder where you have your *.html file and inside html file paste this line:
<link rel="stylesheet" type="text/css" href="./style.css" />
Your issue is caused by wrong path to css
you have a whitespace character between tag opening and the link keyword
< link rel="stylesheet"...
should be
<link rel="stylesheet"...
also - do you really have your css in Documents folder?
I know what's wrong here, I have faced this issue so many times. The background image doesn't show up because you haven't set a height to it.
body {
height: 100%
}
This will do the work.
Reference
is your HTML and CSS in the same folder?
If yes then just use
<link rel="stylesheet" href="Untitled1.css">
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.
I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.
To learn more about web development I am trying to make a webapp.
My first challenge is working out how to interface Django, Bootstrap and custom css.
I am trying to create a nav bar consisting of an image where I can overlay a profile image, a link to your account settings etc. I would like it to look like the following image:
Essentially it would be a responsive nav bar where the height is set at say 200px and the width is always 100% of your browser window.
I have got my custom css as below:
.wide {
width:100%;
height:100%;
height:calc(100% - 1px);
height:200px;
background-size:cover;
}
And I have tried to interface this with the HTML below:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mapvpage/style.css">
</head>
<body>
<div class="wide">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
</body>
</html>
I have got the image into my page. However I cannot work out how to change the image size in any way. I am also a bit confused as to how custom CSS interacts with Bootstrap and Django. Can I just use a mix of Bootstrap and custom CSS as and when I want for different elements?
Many thanks for any help, I have been working on this for a while and getting nowhere so would appreciate some guidance!
Update:
CSS:
#header {
background-image:url("paper.gif");
max-width:100%;
max-height:auto;
}
HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static "mapvpage/style.css" %}">
</head>
<body>
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
</body>
</html>
Note I loaded the CSS stylesheet in a different way (as suggested in the other answer). It was working before (as I tested it with simple font sizes etc) so not sure if that was necessary.
First of all I will answer your question about mixing things.
When you use Django, this means that you have a Django application that renders some html and sends it to the client to display it in a browser. This html, uses bootstrap in order to give a consistent and responsive style. What bootstrap does is to apply some css to your html. However, if the functionalities provided by bootstrap are not enough, you can always include your own custom css and there is no problem with that.
About your header, I would do it having a bootstrap row with a background image and a col with padding to include the image:
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
Then, you would need to add the background image of the header to the header div:
#header {
background-image:url("paper.gif");
}
You can easily find some more properties to add to the header css in order to center the image, expand it to fill the whole div...
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>