So I am following along with a youtube tutorial to set up my VSCode on front-end development for beginners. Heres the link to the video. https://www.youtube.com/watch?v=aydFCQiUW44&list=WL&index=10&ab_channel=CoderCoder
My issue is that as I follow along step by step when it's time to check my page to ensure that everything is showing live, everything is showing except the background color. The uploader has her comments turned off so I can't ask what I am missing so I am searching here for help. Here's the code. I am using the live sass compiler by Glenn Marks. the Live sasscompiler by Ritwick Dey prompts me to use that one instead, and I am also using the Live server by Ritwick Dey.
html {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3;
margin: 0px;
padding: 0px;
background-color: #202020;
color: #ffffff;
}
was expecting to see the background in black (dark grey) with white text. but instead its just white background with black text.
Related
I'm having issues with trying to add a background image to my website,
The background showes up in Firefox but I have to reload the page 2 time before I can see it :/ and on Chrome, it does not show up at all :/
Here is my code:
html {
/*-------------------------- Fond De Pages --------------------------*/
--blue-back: fixed url("/medias/images/blue_back.jpg");
--christmas-back: fixed url("/medias/images/christmas_back.jpg");
--mlg-back: fixed url("/medias/images/mlg.png");
/*-------------------------------------------------------------------*/
background: var(--christmas-back); /* Changer le fond ICI */
text-decoration: none;
color: inherit;
font-family: 'Roboto', sans-serif;
display:inline-block;
}
body {
text-decoration: none;
color: inherit;
margin: 0;
padding: 0;
}
I've found the problem: In some versions of chrome, CSS variables are not supported !
I've had to directly enter the url of the background image and no, it's working properly !
When I view the site I'm working on using firefox for android, it looks OK if the site is viewed landscape.
However, when the site is viewed portrait, the color defined in body {background: #185fa0;} continues on, making the page unnecessarily long. The image is an example, I would like the blue background to finish much closer to the content, like it does in every other browser. Can anyone advise?
My CSS:
body {
margin: 0px;
padding-top: 0px;
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
background: #185FA0;
padding: 0;
margin-bottom: 0;
}
An example:
Thank-you!
UPDATE:
I found this earlier today, suggesting that it is a bug with firefox, but I don't know how to fix it. https://support.mozilla.org/en-US/questions/1045459
I am trying to tint an image with a transparent linear gradient.
Dev tools say my property is invalid. If I get rid of the gradient, the image shows up fine. Is there something I'm missing?
body {
background: linear-gradient (rgba(255,0,0,0.45),rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
You need to use prefix's for different browsers while using css gradient propery,
check this code.
body {
background: -webkit-linear-gradient(rgba(255,0,0,0.45), rgba(255,0,0,0.45));
font-family: 'Oswald', sans-serif;
font-size: large;
}
This is simply because your markup fails. You have a single space too much. Remove the space between linear-gradient and ( and you will see the issue sorted. I added the working code below, and marked it up to my own preference.
Here's a pen with the working example (and a different image). Try adding the space live in the pen, and see everything disappear again. :)
body {
background:
linear-gradient(
rgba(255,0,0,0.45),
rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here.
I have investigated as extensively as I can given my coding deficiencies. Currently, I've been editing the styles.css file. I replaced this default code:
/* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
with this revised code, which I cobbled together with my hazy understanding of CSS.
body {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat; nowhitespace: afterproperty;
background-repeat: repeat;
background-color:rgba(255,255,255,0.0);
font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
My thinking was that I needed that rgba bit to ensure that the color is transparent (in case the texture was 'behind' it). I don't know. I was throwing darts. Maybe it's in the wrong place. Maybe it's just flat out wrong. :)
I turn to you more qualified folks to help me out. Thanks in advance for any guidance you can offer.
Rather than setting the CSS of your body element, try setting it on #main-content
Also, you only need the first line to achieve the effect you want:
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
If you don't want the background of the whole page to be affected, but only the background of the WordPress page/post, you shouldn't be adjusting the background properly of the body element in your CSS, which would affect the entire HTML page, but rather of the element for which you want to apply the background, probably #main-content.
Try setting that background property on #main-content near line 24 of your CSS file instead, e.g.
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View
Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.
The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.
That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...