So, I'm trying to make the background image static, and have the foreground content move over it. Having some issues, what am I doing wrong? Here is my current code.
body
{
color: #000;
margin: 10px 0px 10px 0px;
background-color: #ffffff;
background-image:url('http://userlogos.org/files/backgrounds/Mafia_Penguin/Map1280x800.jpg');
background-repeat:no-repeat;
font-family: Arial, Helvetica, sans-serif;
}
You need to set the background-attachment property to fix the background image.
background-attachment: fixed;
Related
Is it possible to create a fancy text in HTML with the help of CSS only?
I am putting a link where you can see a better example of fancy text. https://www.ultimatebeaver.com/modules/fancy-text/
This is one neat CSS style that forces a background image to show through letters on the page.
You can simply put any background in the .knockout class in css given in fiddle, also set different font and style as required.
See the fiddle
.knockout {
background: url(https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
}
body{
background: #444;
}
<div class="knockout">gaurav</div>
Found a similar question here
Border won't show despite appearing in inspect element
Answer is to change it from
border: 20px solid red
to
border-right: 20px solid red
Well that didnt do anything for me.
I tried top left bottom and right. Nothing showed.
body {
border:20px solid #bdc3ct;
max-width: 700px;
width: 80%;
margin:20px auto;
padding:20px;
font-family: 'Source Code Pro', monospace;
}
However, this works.
h2 {
color: #2c3e50;
text-transform: capitalize;
border:20px solid red;
}
I can get a red border to show around my heading but I cant get a grey border to show around my body.
Supposed to look like this. Everything contained within the border.
The border around the heading works, but no grey border. Inspect element shows in the bottom right corner "invalid property value"
Border color code is not working
body {
border:20px solid #333;
max-width: 700px;
width: 80%;
margin:20px auto;
padding:20px;
font-family: 'Source Code Pro', monospace;
}
#bdc3ct
This is not a valid colour hex code.
Check this site for the correct hex value, or use RGB.
http://htmlcolorcodes.com/
#bdc3ct is not a color. Hex color values a 0-9 and a-f.
Chaning to #bdc3cf works
I search in google and don't found color with code #bdc3ct.
use of other code, for example #ccc.
body {
border:20px solid #ccc;
max-width: 700px;
width: 80%;
margin:20px auto;
padding:20px;
font-family: 'Source Code Pro', monospace;
}
One of best site for select color is
Here
I am trying to put this image as logo so it appears on the top of the page. I have tried to put background-color:transparent; but it's still not mixing well. I only want the text in the image to appear on the page. Can someone please help me? I know I am doing it in a really stupid way.
* {
margin: 0px;
padding:0px;
}
body {
background-color: black;
}
#logo {
background-color: transparent;
}
<img src="https://i.stack.imgur.com/3jXRQ.png" id="logo">
You could try to use the blend mode, but with this may affect the logo colors too, depending on the mode.
The structure is the following:
.blended {
background-image: url(url.jpg);
background-color: color;
background-blend-mode: mode;
}
There are several modes: : screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.
But the better idea is to change the logo itself in the graphics editor.
As pointed out in the comments, your image does not have a transparent background.
It has a white background. You need to edit your image to have a transparent background.
Alternatively, you could attempt to create your logo entirely with HTML/CSS.
Here is an example using just native system fonts. Using #import or #font-face, however, you could actually use the exact fonts that your logo (image) is using. Given the simplicity of the logo, you should be able to faithfully recreate it this way.
body {
background: #000;
}
#logo {
font-family: Arial, sans-serif;
font-size: 40pt;
font-weight: normal;
letter-spacing: -1px;
color: blue;
}
#logo em {
font-family: serif;
font-style: italic;
font-size: 58pt;
font-weight: bold;
color: green;
}
#logo span {
font-size: 48pt;
}
<h1 id="logo"><em>be</em><span>C</span>reative.com</h1>
I am using Google Website Translator but when I translate the page to another language, a drop down appears on top of the browser causing all my content of my website to go down except for the background image.
My website is http://www.trialwebsite.comze.com/Index.html
You can check it and can view my source to know the problem. The code for the body and background photo is:
body {
margin: 0;
padding: 0;
color: #555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
background-image: url(images/templatemo_header.png);
background-position: top;
background-position:inherit;
background-repeat: repeat-x
}
You can move the background outside the body, so it becomes a DOM element who google translate can move too.
insert this this just below your <body> tag:
<div class="background"></div>
Then add this to your stylesheet:
.background {
background-image: url(images/templatemo_header.png);
height: 188px;
position: absolute;
width: 100%;
}
EDIT: And remove the background property from body css rules.
Try adding the following styles to your website's stylesheet:
.skiptranslate {display: none !important;}
This should hide the bar that Google places on your website after the translation finished.
I'm trying to scale the background color. I'm having the nav bar and I want the color to be from the nav bar to the bottom.
I've tried using:
background-size: 80px 60px;
Which doesn't work because it is still filling the page for 100%. Also for everyone to know i'm using bootstrap.
This is the css from bootstrap:
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #F5F5F5;
}
These are my css rules which override the bootstrap css files.
body {
background-size: 80px 60px;
background-repeat: no-repeat;
}
The nav bar is allways has a margin of 15% left and right so the width that the bg color has to be is 70%. The top margin is 0 because that it is following the image at the top.
If i've forgot to give information my apalogies and I will add the needed information asap.
you cannot size a background-color, but you can give a specific size to a gradient which is treated as a background-image.
here's what you could do:
http://jsfiddle.net/JkhCs/
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color:transparent;
background-image: -webkit-linear-gradient(red, red);
background-image: linear-gradient(red, red);
background-size:80px 80px;
background-repeat:no-repeat;
}
Do you know backgroud-size:cover and backgroud-size:contain?
Check it out at css3.info or W3Schools, it’s fantabulous.