I would like to set an overlay on my site:
When I play around with the color in the inspect window, I can make it work in the element style like this:
element.style {
background-color: rgba(0,0,0,0.4);
}
I tried to add the line background-color: rgba(0,0,0,0.4); , in my body css, but it is not working. Should it not be on the body element?
<html>
<head>
</head>
<body>
</body>
</html>
body {
background-color: rgba(0,0,0,0.4);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;
overflow-x: hidden;
position: relative;
}
If you're talking about overlaying color on your bg img then the rgba needs to be in the same css block as the img
body {
background-image: bgimg.jpg;
background-color: rgba(0,0,0,0.4);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;
overflow-x: hidden;
position: relative;
}
Related
.home {
background: url(download.png);
background-size: 1500px;
overflow: ;
background-position: -130px -20px;
}
.content h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 45px;
font-weight: 900;
line-height: 50px;
position: relative;
bottom: 50px;
z-index: 200;
}
.content h2::before {
content: "";
background: linear-gradient(130deg, #1951bf 0%, #25b7c7 89%);
position: absolute;
height: 14px;
width: 334px;
filter: opacity(0.4);
top: 77px;
z-index: -200;
}
.content p {
width: ;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 15px;
color: #3a505f;
letter-spacing: 1.1px;
line-height: 26px;
z-index: 200;
transform: scale(1.04, 1.1);
}
.home {
display: flex;
justify-content: ;
align-items: center;
height: 100vh;
color: black;
z-index: -100;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Source+Sans+Pro:wght#700&display=swap" rel="stylesheet">
<div class="home">
<div class="content">
<h2>No-Code<br>Payment Platform</h2>
<p>PayRequest makes it easy to create your own branded payment page, and to send payment links to all your customers.</p>
</div>
</div>
Above is the code for the site I am building.
The UI of the page I want to rectify: click-here-to-view
The original UI: click-here-to-view
I have the exact same font-family down and I have tried different sizes and weights but I am not able to get the exact same text as the original site in the p section. I have got the same one down in h2 but not in p.
Can somebody help to resolve this issue, please?
In h2 you have font-family: 'Source Sans Pro' but in p you have 'Poppins'. So this is why they are two different fonts. You can either declare a universal font family using *{} or you can just switch the font family in p to 'Source Sans Pro'
Keep the same font-family for the elements in your css. h2 and p and different font-family. Also if you put everything in the a < body> tag you can just define the font-family in their rather than adding it in every element like so:
body {
font-family: 'Source Sans Pro', sans-serif;
}
I am new to HTML and CSS. I'm wanting to add an image to the background of my page but I do not know how to do that.
I am wanting to keep the CSS internal to the page, so that this background image is specified by the CSS in the <head> of my page:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can set an image for the background of your page via the background-image CSS property. Here, a background image is specified via a URL and applied to the body element of the document:
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
Here is a complete example with your existing HTML:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can use background attribute ,
<body background="bgimage.jpg">
Using CSS,
body
{
background-image: url("bgimage.jpg");
}
You can also use background shorthand property as well which allows you to set different background properties which includes background-image as well,
body {
background: lightblue url("bgimage.jpg") no-repeat fixed center;
}
I'm building a basic website and I've gotten pretty far, but I have stumbled upon a problem: I want all of my headings to be in the font "Arvo", but for some reason, only the index page has Arvo in the heading. Since all of my pages are linked to the stylesheet I should be able to change every h1 to this font.
Here's what my style sheet looks like, there's probably some unnecessary code in there, but I'm a total beginner.
body {
background: url("https://www.xmple.com/wallpaper/streaks-lines-red-stripes-1920x1080-c4-7f2a33-972c36-b02c39-cb2b3b-l4-45-72-116-187-a-135-f-1.svg") center center repeat;
margin: 0;
padding: 0;
background-attachment: fixed;
}
#wrap {
width: 54%;
margin: auto;
background: #fff2f9;
overflow: hidden;
padding: 15px;
}
div {
width: 300px;
height: 2000px;
background-color: white;
box-shadow: inset 0 100px 100px #ffffff, 0 10px 15px #000;
}
p {
color: black;
}
h1 {
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 70px;
}
p {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
}
b {
font-family: "verdana", sans-serif; color: gold;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
a {
font-family: "verdana", sans-serif;
color: black /* unvisited link */
}
/* visited link */
a:visited {
color: black;
}
/* mouse over link */
a:hover {
color: gold;
}
/* selected link */
a:active {
color: black;
}
}
What else do I need to do for the font to change on all of my HTML pages?
Maybe the style is override, therefore use !important to fix it.
Use the following CSS for all headings:
h1, h2, h3, h4, h5, h6 {
font-family: Arvo, Georgia, Times, serif !important;
font-size: 59px;
line-height: 70px;
}
If you want to apply it only for h1 then remove the rest of headings. In the question you said "all headings", therefore, I added the all heading levels.
Update:
Try linking the font with your page, put the following inside head element:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arvo" />
Or
Import the font. Put the following line in the very begining of your CSS:
#import url('href="//fonts.googleapis.com/css?family=Arvo');
I'm trying to make a simple button in HTML using an image and basic CSS styling.
When I load up the html file in a browser, it shows the text of the button as well as some of the button image, but whatever falls outside the text gets cut off.
I'd like the button to be fully shown (it's pretty large) with no text at all.
Here's my HTML code:
<link rel="stylesheet" type="text/css" href="style.css">
Fake Button
And here's my css file:
a.likeAButton {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_inactive.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:active {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
Any help would be appreciated.
Anchors are inline by default, so they have no size. Try this:
a.likeAButton {
display: inline-block;
...
}
a.likeAButton {
display: inline-block;
width: 500px;
height: 600px;
background-image: url(http://placehold.it/500x600);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
background-image: url(http://placehold.it/500x600/0000ff);
}
a.likeAButton:active {
background-image: url(http://placehold.it/500x600/ff0000);
}
Fiddle demo
Notice that I stripped most of the style statements from your :hover and :active pseudo-classes. There's no need to repeat them.
What is wrong with the css code below:
body {
background-image: #000 url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
Have tried following variations also but still not working:
background-image: #000 url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background-image: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg') repeat;
background-image: url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background: url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background: url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
The background-image property takes a single argument: the URL to the image.
You are confusing it with the background shorthand property, which takes a list of values and applies them to various different full properties (including background-image, background-color and background-repeat).
If you're using background property you can use the color as well as the image together, but if you're using background-image property you can't use the color with the image, you're to use only the image, than for the color you're to use separate property, something as follows:
body {
background-color: #000;
background-image: url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
}
or both the properties combined in single background property as follows
body {
background: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
}
Use only background property:
body {
background: #000 url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
Jsfiddle - example
Remove #000 and repeat :)
body {
background-image: url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg);
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}
JSFiddle
First you need to get rid of repeat. and add this after
background-repeat:repeat-y;
Then make sure that the url are in single quotes.
body {
background-image: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
background-repeat:repeat-y;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}