I am looking for a way to put the background colour of my website as this colour without having to use a full sized image.
<!DOCTYPE html>
<html>
<body style="background-color:#b0e0e6;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<img src="images/youtube1.png" alt="Image of a phone with youtube on it" style="width:100%;">
<div class="content">
<h1>The History Of Youtube</h1>
<p>Started by Jawed Karim, Steve Chen, and Chad Hurley, YouTube first launched in 2005 and has now become one of the most visited websites in the history of the internet. As employees of PayPal, the three soon realized, in 2004, that there wasn't one location where videos could be shared. Years later, Karim explained that it was the Janet Jackson Super Bowl incident as well as the tsunami in December that triggered the idea.</p>
</div>
</div>
</body>
</html>
Image link: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.xmple.com%2Fwallpaper%2Forange-pink-gradient-linear--c2-ff69b4-d8b04d-a-30-f-14-image%2F&psig=AOvVaw0ZdrAOKDkB9tViVXEdnmhC&ust=1582726670838000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKCgjbry7OcCFQAAAAAdAAAAABAJ
You can use linear-gradient()
The title of your image says
Wallpaper orange pink gradient linear #ff69b4 #d8b04d 30°
which is all indication you need. You can write it like so in CSS
.background {
width: 100vw;
height: 100vh;
background: linear-gradient(30deg, #d8b04d, #ff69b4);
}
<div class="background"></div>
Related
it would seem this question has been asked many times over different websites with no real "ah-ha!" answer. I'm still very new and I understand there's a million different ways to code this but I'm hoping for a very simple solution that won't require me to rewrite my code.
It's my understanding this is the inherent nature of parallax, people either have had to crop the images to make them work or have had to do very large workarounds to solve the issue that parallax inherently zooms in or messes with the dimension of the original picture, no matter the orientation on the page (in my case, I'd like to keep it on the left side of the screen, with the text on the right being the scrolling element, haven't gotten around to it but having the nav bar on the top right-half of the page is my next project).
The dimensions of the picture are 1341x2063; I've heard to people setting max-height 2063px; min-height 1341px;. Tried that, didn't work.
I threw up an imgur link for the actual picture I'm working with inside my code, here's a screenshot of what it's looking like on my end: https://imgur.com/lVrQgrQ
My html has my parallax's css inline and I'd like to keep it that way as it's easy for me to understand without having to rework a ton of items.
#charset "UTF-8";
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
button {
transition-duration: 0.4s;
background-color: #800080; /* Purple */
border: none;
color: white;
padding: 6px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
button:hover{
background-color: #4CAF50; /* Green */
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<!-- Adding "active" class/tag to index, for navbar -->
<link href="index.html" class=active>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="Learn about Tom Waters, English tutoring services in Seoul, resume and more.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Me | Home</title>
<!-- GOOGLE FONTS
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
-->
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1671.6">
<style>
.parallax {
/* Image to be used */
background-image: url("https://imgur.com/a/FHtZqm7");
min-height: 600px;
/*scrolling effect*/
background-attachment: fixed;
background-position: left;
/*troubleshooting image width */
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-size: auto;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
*/
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:400px;background-color:lightgray;font-size:28px">
<center>
<nav>
<ul id="mainMenu">
<li>About Me</li>
<li>Tutoring Services</li>
<li>Resume</li>
<li>Photography Portfolio</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
</center>
<br><br><br>
<p><center>
This is me,
<br><br>and this is a personal and professional website, designed solely by myself (as a personal project) with the aim of displaying my resume, contact information and other items in an accessible manner for interested parties to see.
</center></p>
</div>
</body>
</html>
When the background-attachment is set to fixed, it gets fixed relative to the viewport. This is to achieve the parallax effect. The browser does this while keeping the aspect ratio. So to prevent the looks of a stretched or zoomed image you can just crop your image or play around with the background-size css value.
.parallax {
background-size: 100% 65%;
}
The only setting you have to change is the second value, this will help you fix the stretchy or zoomed effect on the image, an other suggestion you might check is set background-size to cover.
Just to add, adding background-size: 'auto auto' worked for me. Having it set to 'cover' was causing a huge zoom effect. This fixed it.
I am attempting to re-create something similar to this image below, minus the little page curl in top right hand corner.
Banner Example:
I am adding the code to a previously coded website by another designer. I am first coding it separately, but cannot get the text and banner to be responsive, though the image is. Nor can I get it to overlay like I wish on the image itself.
Here is my code below, I know it is something simple but seem to be hitting a mental wall.
#charset "UTF-8";
/* CSS Document */
/*Header Image*/
.headerimage
img
{
}
h1
{
position: absolute;
display: block;
width: 100%;
font-size: 1.45em;
font-family: 'Roboto Slab', Rockwell, Serif;
font-weight: bold;
color: #FFF;
text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);
padding: .6em 1em .6em 1.7em;
background: linear-gradient(to right, rgba(178,34,34,0) 0%,rgba(169,32,32,0.8) 5%,rgba(160,30,30,1) 50%,rgba(152,29,29,0.8) 75%,rgba(178,34,34,0) 100%);
}
.interior-header img
{
display: block;
position: relative;
width: 100%;
height: auto;
border: 1px solid #b22222;
padding: 1px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Heading</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="interior-header img>
<div class="headerimage">
<img src="images/Joslyn-Interior-Images.jpg" width="630" height="240" alt="Traffic Control" />
<h1>Traffic Control</h1>
</div>
</div>
</body>
</html>
Traffic Violations Image
I didn't want to type out all your code so here is an example.
Note: When I posted this one, no codes were up, I left it up in case it helps others. The code for the answer is at the bottom of the answer.
https://jsfiddle.net/norcaljohnny/5o95L0qy/
.box {
background: grey;
height: auto;
width: 100%;
}
.text {
font-size: 6vw
}
Updated: Here is the current JsFiddle. Hope this helps.
https://jsfiddle.net/norcaljohnny/65wnds86/
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/
When I apply a linear gradient to the body in CSS like below
body
{
background: linear-gradient(#10416b, black);
}
It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color). Adding in height:100%; to the body doesn't change anything.
I fixed the problem by doing the below in CSS
.background {
background: linear-gradient(#10416b, black);
height: 100%;
}
and this in HTML
<!DOCTYPE html>
<html class="background">
// lots of unrelated code in between the tags
</html>
But I still don't understand why setting the background with the linear gradient in the body didn't work. If somebody could explain this to me that would be great.
Use 100vh instead of 100%
body {
height: 100vh;
background: linear-gradient(#10416b, black);
}
https://jsfiddle.net/r77r0cco/1/
body in and of itself doesn't have a height, so it looks to its parent element <html> which, because it has no content, also has no height.
vh uses the viewport dimensions instead of a parent element's
The body has no height of it's own as such without the HTML having a height or the body containing content.Then the gradient will repeat because repeat is the default in the background shorthand property.
html {
height: 100%;
}
body {
background: linear-gradient(#10416b, black);
}
Firstly, I'd like to thank #Paulie_D who inspired me to come up with this answer.
Below you can see 2 methods to get your body have a gradient background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
html {
min-height: 100%; /* Unlike 'height', which is used by
#Paulie_D, this will make your webpage
automatically resize when it exceeds
the 100% height, thus it won't start the
gradient over
*/
}
body {
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">Hover and scroll!</div>
</body>
</html>
This method will automatically resize the gradient to fit the whole content.
If you want the gradient to be the size of the window height, you can use a `::before` pseudoelement on `body`, to draw a fix-positioned gradient with a `z-index` of `-1`. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
body::before {
content: "";
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -1;
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">
Hover and scroll!
</div>
</body>
</html>
Sorry, I don't usually answer Stack Overflow questions, but this was a top result of a Google query, so I couldn't resist. If you can improve this answer, please request an edit.
I have this really weird problem. I just want to draw two simple lines that are a little bit spaced out between one another.
Here's the html:
<div class="hline">
</div>
<div class="hline">
</div>
And the CSS:
html, body {
background-color: white;
}
.hline {
background-color: black;
height: 2px;
margin: 50px;
}
When the background color is of the body is white, it works flawlessly, but when it's black, and the background color of my divs is white, there just seems to be one big white line in the black background. Why is that?
Thanks a lot in advance,
Luke :D
it's working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
background-color: black;
}
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline">
</div>
<div class="hline">
</div>
</body>
</html>
I tried your code and this is what I got for a black background and a white line
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { background-color: black; }
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline"></div><div class="hline"></div>
</body>
</html>