new to ASP.net core, how do I add background colour to the page using the cshtml? I am using the automatically generated page but this is invariable white with black text and it doesn't seem to like the use of inline.
In .net core application,there is a default layout in shared/_layout.cshtml.And each view will use the layout.And in _layout.cshtml,we often reference site.css in <head></head>.So if you want to change the background color of all the pages,you can change the style in site.css.Also, you can change the style in _layout.cshtml by.
For example,I change the background color of body:
In site.css:
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
background-color:red;
}
In _layout.cshtml:
<style>
body {
background-color:red;
}
</style>
Result:
You could also do something like...
<body style="background-color:red">
Related
I am using Vue-material with the default theme.
This theme adds a background-color on the <html> as below -
Is there an easy way to change this to white? I do not want to change anything else in the theme, so I don't know if it makes sense to customise the theme. Though I tried to customise the theme using instructions from here but no success. I just couldn't figure out where to include the customisation code snippet as demonstrated in the link.
Why don't you just write the style to have your own background color:
html.md-theme-default {
background-color: white;
}
I try everything on this and other forum to do it and not ask people..
But nothing happened! haha
I would like to know if someone here know how to change the background colors on Henson template on Squarespace ? (So also all the texte of the page).
I try this in the CSS section but it didn't worked.
#collection-5e827250f835166c09c3dcbe
{background-image:url("https://static1.squarespace.com/static/5c3a93e22487fd34bb34eaa9/t/5ea1dd8bda93e023950c5bcf/1587666340724/Background.jpg");
background-size:cover;
background-position:center;
}
And i try this in the injection code :
<style>
#collection-5e827250f835166c09c3dcbe {
background-color:#000;
}
</style>
Thank you in advance,
hope someone can help me!
The Henson template has a "title-card-overlay" that, if enabled, makes it non-obvious to change the initial background color of a the page.
To change the background color of a specific page, add the following CSS via the CSS Editor/Custom CSS:
#collection-57ae1156e3df28c4ce90ea48 .main-content {
background-color: #000000;
}
#collection-57ae1156e3df28c4ce90ea48 .title-card-overlay {
background-color: #000000;
}
Of course, in the above code, change the collection ID 57ae1156e3df28c4ce90ea48 to the ID of the page in question.
I want to set background color of whole app or a single background color
but what happened if i use div , different device take different height that's why bottom side not cover up and i am unable to set ion content background.
Add below code to your app.scss file :
html, body, ion-app, ion-content, ion-page, ion-view, .nav-decor {
background-color: #yourColor !important;
}
Bro u can use in this case i have a stylesheet global with primary color variable
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
I have a simple question. I want to style the header bar in jQuery mobile. Specifically I want to set the height of the bar and add a background image to it. How can I do that?
Thank you in advance
This is how I handled it. Instead of actually putting an H1 inside the data-role="header", just directly insert a
<div class="ui-title"></div>
and then add something like this to your custom CSS.
.ui-header .ui-title{
margin: 0.3em 70px 0.7em 10px;
background-image:url(../images/logo-page.png);
background-repeat:no-repeat;
background-position:0 0px;
width:178px;
height:40px;
}