how to have different background images in two different pages in angular2? - html

I have a angular 2 application on which i have to use seperate background images on home page and other pages, i have applied image on index.html to have a background image but i need to add different image on different pages.
This is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="resources/js/semantic.min.js"></script>
<script src="resources/js/slideshow.js"></script>
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" />
<link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" />
<link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css">
<link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="resources/css/styles.css" rel="stylesheet" type="text/css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/chart.min.js"></script>
<script src="resources/js/chart-data.js"></script>
<script src="resources/js/easypiechart.js"></script>
<script src="resources/js/easypiechart-data.js"></script>
<script src="resources/js/bootstrap-datepicker.js"></script>
<script>
<!--Icons-->
<script src="resources/js/lumino.glyphs.js"></script>
</head>
<body style="background-image: url("resources/static/pic/slide_1.jpg");" >
<app-root></app-root>
</body>
</html>
Please suggest me how to achieve this.

What about applying a background image at the component level instead of inside the index.html? Then each component could have a different background image. You could even have a separate css file that includes a snippet of code like this:
body { background-image: url("resources/static/pic/slide_1.jpg"); }
and include it in each component "styleUrls" that you want that background image to appear on. Use a different css for the components you want a different image on.
Hope this helps

Yes you can do this like you can have different background images on different components of your app. To do this please follow the instructions given below.
In your main css file that is style.css give the height 100% to the body & html please refer the below code.
Style.css
body,html{
height: 100%;
}
Now in your components css file that is namespace.component.css file add the below code
.component-body{
background-image: url(/assets/images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
Now make sure that you are having all the contents inside the div contains this class. You can have the dive classes & the css into their css files accordingly. For more information you can refer this link

Related

I am new to CSS. My background image is not loading. I am using external CSS, and my OS is windows

Following is my CSS and HTML file.`
.backgroundimage{
backgroud:url('C:\Users\shvikram\Desktop\Social_Media\Images\login_page.jpg');
background-attachment:fixed;
}
<html>
<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
<link rel="stylesheet" type="text/css" href="CSS\main.css">
<title>Social Media</title>
<body>
<div class="backgroundimage">Hello World</div>
</body>
</html>
The Directory Structure is as follows.
Social_Media directory contains Images, CSS and index.html file.
I tried using following notation also, but it is not working.
.backgroundimage {
background-image: url('\Images\login_page.jpg');
background-repeat: no-repeat;
}
It's only a problem with the image path. It should be relative to your HTML file:
<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
<link rel="stylesheet" type="text/css" href="CSS\main.css">
<title>Social Media</title>
<body>
<div class="backgroundimage">Hello World</div>
</body>
CSS:
.backgroundimage {
background-image: url('http://via.placeholder.com/350x150');
background-repeat: no-repeat;
height: 300px;
}
Read about it here:
How to give the background-image path in CSS?
As first, your stylesheet link and title are not withing the head tag.
As second, the links inside your stylesheet are relative to CSS file (not to the file where the stylesheet was included), so it should be:
.backgroundimage{
backgroud: url('../Images/login_page.jpg'); /* In parent folder, Images */
background-attachment: fixed;
}
As third, do not use backslashes for file paths, no matter you are on Windows OS.
As fourth, go on and use your browser inspector, to be sure all resources are loaded, than to track errors etc.
Final HTML should look like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="Images/Logo.ico" />
<link rel="stylesheet" type="text/css" href="CSS/main.css" />
<title>Social Media</title>
</head>
<body>
<div class="backgroundimage">Hello World</div>
</body>
</html>

Background-image doesn't show up in a div

It doesn't even show up in the Chrome Inspector. I am doing something wrong but don't know what.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
And the CSS is:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
I have added all of the background-properties in the css and the div has a size.
My file structure is like this:
I see several things that can cause the issue:
There is double equal here: <div id=="container header_div">. Should
be single. In addition, I see two words in the id separated by
space. ID's cannot be chained like classes, and this is not a valid
syntax. Since you style #header_div, the id attribute on the div
should be id = "header_div".
The relative path to the image starts with two dots. As a result, you step out of the current directory. Since your images folder is in
the same directory as the page.html, the filepath should be:
url(/images/header_background.jpg);
To see the image you would need to declare the height in the #header_div element as well.
By doing this, I was able to see a background image in my test. I hope this helps.
Not exist <div id="container header_div"> in you css, change to <div id="header_div">
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id="header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I had a similar issue like this before. This is what I did. I set the div background to just this background: url("./images/header_background.jpg");

Does having a separate CSS file have an effect on the code running?

I am learning CSS and HTML, and I was creating a template locally, first time I had a separate local CSS file, in this file the body will not be styled but a div was, the second time I tried to include the CSS in the HTML body and not in a separate CSS file and everything worked fine.
First time, the div was styled but the body was not.when a separate CSS file was created:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
</style>
</body>
</html>
<!-- separate CSS file-->
body {
background-color:black;
}
div {
background-color:yellow;
}
Second time, everything was styled as required when the CSS was inside the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
body {
background-color:black;
}
div {
background-color:yellow;
}
</style>
</body>
</html>
You need to include your stylesheet after the bootstrap one for it to override the default bootstrap styling.
What's happening in your first example is it's loading your stylesheet, then loading the bootstrap stylesheet.
In the second example, it's loading your stylesheet, then the bootstrap stylesheet, then overriding the bootstrap stylesheet with the styling you've declared in the html.
In addition to M P's answer, in your second example, using elements as child tags of tags is not proper html. They elements belong in the section.
Your style.css is comimg before your bootstrap file . This needs to be the other way around . The reason your style is working internally is because the dom is compiled last and will override any external styles that do not include !important .
Example
4rd Priority
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
3rd Priority
<link href="style.css" rel="stylesheet" type="text/css">
2nd Priority
<head>
<style></style>
</head>
1st Priority
<div style="color:red;"></div>
All work in this order .
Hope this helps

How to apply the external css style specific to an html file?

I have 5 html files and 1 css file.When I link this external css to all the html files, all the styles are getting applied to all the file. But I wanted only few styles to be used.How can I make it?
Eg:
<head>
<title>Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="file:///C:/Users/myuser/Pictures/HTML/Styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
body
{
background-image: url("file://C:/Users/myuser/Pictures/HTML/bicycles.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Here, the body style is getting applied to all the html files and an unwanted background is being displayed.Please let me know how can I resolve this.

There is something wrong with my css of full calendar. Width auto is not responding

I'm using Full Calendar to show some events dates but having problem with widht value. I want it to be able to work properly at minimum 1024x768 resolution and other bigger screen sizes ( such as 1366x768 sized ) I tried quoting every width value in fullcalendar.css, enabling, disabling all css files one by one, inserting inline styles. Somebody advised working with bootstap responsive but it didn't gone well either. Right now i can see my calendar perfect in 1024x768 resolution but in bigger resolutions there is a gap between calendar and right tables. I used chrome's tool inspect element and it says there is nothing on that empty area such as margin or padding.
my header is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS FILES -->
<!--[if !IE]><!-->
<link rel="stylesheet" href="/assets/default/css/style.css" type="text/css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/assets/default/css/all-ie-only.css" />
<![endif]-->
<link rel="stylesheet" href="/assets/default/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/scripts/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/css/fullcalendar.css" type="text/css" />
<link rel="stylesheet" href="/assets/default/css/fullcalendar.print.css" type="text/css" />
<link href="assets/default/css/bootstrap-responsive.css" rel="stylesheet">
<!-- END CSS FILES -->
<!-- JS FILES -->
<script src="/assets/default/scripts/jquery-1.8.3.min.js" type="text/javascript" ></script>
<script src="/assets/default/scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript" ></script>
<script src="/assets/default/scripts/bootstrap.min.js" type="text/javascript" ></script>
<script src="/assets/default/scripts/fullcalendar.js" type="text/javascript" ></script>
<!-- END JS FILES -->
<title>Permission System</title>
</head>
Here is a copy of my style.css:
and my Full Calendar div:
<div style="min-width: 45%; width: auto; float: left; margin-left: 0px;" id="calendar" ></div>
Please help I'm about to go crazy!
I can send you teamviewer info if you think it would be easier to understand.
All codes about css and some pics
Take fullcalendar.print.css out and make sure you have full calendar css and js only to rule out any print css issues.
The print css should only be incuded for print media and not for screen.
Have a look at FullCalendar Source on this page I cant find any reference to print.css in the header.