I've all of a sudden got a problem trying to display a background-image in CSS.
The image is invisible!
I'm trying to use this background image specifically for a certain location on the page, before scrolling down further to another image or background.
Can anyone shed some light on this situation and possibly provide the correct code/explain why I was wrong?
Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p> Form healthy habits to take your fitness to the next level. </p>
Start Now
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
}
h1, h2, a {
font-family: 'Oswald', sans-serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
margin: 0 auto;
}
/* Main */
.main {
background-image: url ("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
height: 600px;
}
.main h1 {
font-size: 150px;
color: white;
text-align: center;
}
.main p {
font-size: 18px;
}
/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
}
.supporting .col {
float: left;
width: 28%;
padding: 10px;
}
.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}
.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}
/* Feature */
.feature {
height: 600px;
}
.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}
/* Footer */
.footer {
height: 600px;
}
.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}
.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}
#media (min-width:600px) {
.main h1 {
font-size: 200px;
}
.supporting .col {
width: 30%;
}
.supporting h2 {
font-size: 40px;
}
.supporting p {
font-size: 14px;
}
.feature h2 {
font-size: 60px;
}
}
Remove space between url and ( in your CSS.
Copy paste URL in Browser if u can see it then may be add Id to div and hard code inside div, try to modify image size and style using view element in any one of the popular browsers.
Then create css for id and try it again .. Even I m new to Css but it always works ..
Or replace HTTP instead of HTTP.. if u dont have certificate then may be it will not show up ..
Maybe just remove the space in the CSS?
background-image: url("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
Related
this is my first question here, be gentle, I just started learning those things :)
I'm working on building a practice page using only HTML, Sass and bootstrap-grid.css (so basically using only rows and columns, card classes are not included in the file, I styled them separately) and I encountered a probably very simple problem that keeps me awake at night.
I need to make all .card-text divs (the white background ones) the same witdh "visually" as the img above them, but simply resizing the .card-text divs or making them absolutely positioned doesn't seem as the right solution due do creating another problems, and I want to keep the .col- because of easy RWD outcomes. The .card-text and .card-img divs inherit the given width of the .col-, the images in have to keep the right proportion and because of the grey background of .card-img is the same as the whole section's background the problem lies only in .card-text (at least visually).
The column structure in a .row looks like this:
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="images/r1i1.jpg" alt="image">
</div>
<div class="card-text">
<h6>Ebony & Ivory</h6>
<h5>Branding</h5>
</div>
</div>
</div>
And so on (six columns) and the sccs for this section looks like this:
.portfolio {
background-color: $color-background;
.card {
background-color: $color-background;
padding: 20px;
.card-img {
height: 300px;
margin: 0 44px;
overflow: hidden;
img {
vertical-align: bottom;
height: 100%;
}
}
.card-text {
background-color: $color-body;
padding-top: 29px;
padding-bottom: 27px;
}
h5 {
margin: 2px 0 0 0;
font-weight: lighter;
font-family: $font-decor;
color: #737373;
font-size: 14px;
}
h6 {
font-family: $font-text;
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
}
.col {
padding-top: 45px;
}
}
Screenshots with inspection of the divs:
.card
.card-text
EDIT:
The scss styles that finally worked:
.portfolio {
background-color: $color-background;
.card {
background-color: $color-background;
margin: 0 44px 50px 44px;
.card-img {
overflow: hidden;
img {
vertical-align: bottom;
width: 100%;
}
}
.card-text {
background-color: $color-body;
padding-top: 29px;
padding-bottom: 27px;
h5 {
margin: 2px 0 0 0;
font-weight: lighter;
font-family: $font-decor;
color: #737373;
font-size: 14px;
}
h6 {
font-family: $font-text;
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
}
}
.col {
padding-top: 45px;
}
}
So the problem was, of course, that I made a deadly sin by setting constant height to .card-img.
Just add the same margin: 0 44px that you have added for the .card-img to your .card-text element and then add width: 100% to both the elements so that they occupy the full width of their parent div and you should get the equal width for both elements as you wanted.
Check and run the following Code Snippet for a practical example of the above approach:
html, body {margin: 0px; padding: 0; width: 100%; height: 100%;}
.portfolio {
background-color: #222;
}
.portfolio .card {
background-color: #222;
padding: 20px;
}
.portfolio .card .card-img {
height: 300px;
margin: 0 44px;
overflow: hidden;
}
.portfolio .card .card-img img {
vertical-align: bottom;
height: 100%;
width: 100%;
}
.portfolio .card .card-text {
background-color: #333;
padding-top: 29px;
padding-bottom: 27px;
width: 100%;
margin: 0 44px;
}
.portfolio .card h5 {
margin: 2px 0 0 0;
font-weight: lighter;
color: #737373;
font-size: 14px;
}
.portfolio .card h6 {
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
.portfolio .col {
padding-top: 45px;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<section class="portfolio">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="https://picsum.photos/240/360" alt="image">
</div>
<div class="card-text">
<h6>Ebony & Ivory</h6>
<h5>Branding</h5>
</div>
</div>
</div>
</section>
Set your img width to 100% rather than height.
Remove padding from .card
Remove margin from .card-img
Hope that works:)
Add certain width to card-img and then move .card-text div inside card-img and change the css styles for card-img.
I have modified your code and added it to the snippet.
Have a look once.
.card {
background-color: #fff;
padding: 20px;
}
.card-img {
width: 150px;
margin: 0 44px;
overflow: hidden;
}
img {
width: 100%;
}
.card-text {
position: relative;
text-align:center;
top: -4px;
background-color: aliceblue;
padding-top: 29px;
padding-bottom: 27px;
}
h5 {
margin: 2px 0 0 0;
font-weight: lighter;
color: #737373;
font-size: 14px;
}
h6 {
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
.col {
padding-top: 45px;
}
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="https://p1.pxfuel.com/preview/844/972/952/suit-model-businessman-corporate-royalty-free-thumbnail.jpg" alt="image">
<div class="card-text">
<h6>Ebony & Ivory</h6>
<h5>Branding</h5>
</div>
</div>
</div>
</div>
Image Source: Google
Hope this helps!!
So I made a simple page that looks like below:
It looks fine but if I change it to a smaller window or changing the zoom %, this is what it looks like:
As you can see, it's not right as the button is way off but the <p> and <h> tag seems to be align but not the button.
Here is my relevant part of the code:
function Pitch() {
return (
<div className="section">
<div className="descriptionpitch">
<h1>See what's next.</h1>
<p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
</div>
<div className="joinbutton">
<button>JOIN FREE FOR A MONTH</button>
</div>
</div>
);
}
scss:
.section {
color: white;
margin: 0 3%;
position: absolute;
top: 35%;
font-size: 1.8vw;
//text-align: center;
#media (max-width: 1000px) {
top: 55%;
font-size: 1.9vw;
}
#media (max-width: 800px) {
top: 60%;
font-size: 3.2vw;
margin: 0 4em;
text-align: center;
}
h1 {
font-size: 3em;
margin: 0 0 0.2em;
font-weight: 700;
}
p {
margin: 0 3.5em 0 0;
font-weight: 700;
}
button {
font-size: 14px;
letter-spacing: 1.9px;
font-weight: 100;
margin: 1.2em 24.5em 0 0;
padding: 12px 2em;
color: white;
background-color: #e50914;
cursor: pointer;
text-decoration: none;
//vertical-align: middle;
font-family: Arial, sans-serif;
border-radius: 2px;
user-select: none;
// text-align: center;
border: 0;
&:hover {
background-color: #e53935;
}
}
}
Is there a way i could fix this?
Try this code..add this in same div.. if u want more space at the top of the button. add margin-top for this button
function Pitch() {
return (
<div className="section">
<div className="descriptionpitch">
<h1>See what's next.</h1>
<p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
<button>JOIN FREE FOR A MONTH</button>
</div>
</div>
);
}
And modify this css code too..
css
#media (max-width: 800px) {
.section {
text-align: left;
}
}
In your CSS code, make on change, remove text-align: center; from this block
...
#media (max-width: 800px) {
top: 60%;
font-size: 3.2vw;
margin: 0 4em;
/* text-align: center; */
}
...
working demo on stackblitz here
Remove the margin-right from the button in your 800px media query.
I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2);
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:1%;
padding:1%;
}
nav a{
display:block;
background-color: white;
border: 1px solid black;
text-align: center;
border-radius: 35px;
text-decoration: none;
padding: 2%;
margin: 1%;
}
h1{
text-align: center;
color:rgba(255,0,0,.7);;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
/* Safari and Chrome */
-webkit-column-count:3;
-moz-column-count: 3;
column-count:3;
}
ol{
list-style:upper-roman;
margin:1em;
}
img{
display: none;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 600px) {
img{
display: inline-block;
width: 20%;
margin-right: 4%;
}
section {
display: inline-block;
vertical-align: top;
}
#left {
width: 20%;
}
#center {
width : 70%;
}
#center div:last-of-type{
width: 100%;
padding:.75em;
padding-left: 0;
margin: 0em 1em;
}
h2 {
font-size: 1.7em;
}
h1::after {
content: "(I guess...)";
}
h3 {
height: 35px;
line-height: 35px;
font-size: 1.6em;
font-weight: bolder;
}
#center div p {
height: 45px;
line-height: 45px;
font-size: 1.6em;
}
header , footer {
background-color: initial;
}
footer {
width: 70%;
float: right;
}
footer p {
text-align: left;
}
}
#media print {
nav a {
display:block;
background-color: white;
border: 0;
text-align: center;
border-radius: 0;
text-decoration: none;
padding: 0;
margin: 0;
}
h1 {
font-style: italic;
font-weight: bolder;
font-size: 16px;
}
}
<!--
Create a stylesheet that will style the page
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
<header>
<h1> Web Design is Awesome!!!</h1>
<nav>
University of Michigan
Intro to Web Design
</nav>
</header>
<footer>
<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
</footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
</body>
</html>
Try using em, px, or a a percent value.
h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}
The percentage will depend on what the default text size is.
Usually the default size is 16px.
I was facing the same problem for H1. It turned out that for me normalize.css was overriding the font-size in the CSS file.
Try to use css for print mode:
#media print{
h1{....}
}
You can add !important in front of the h1 property value so that the browser does not override the value in print preview.
I am new to HTML and CSS as i am learning these things. I tried to write a very simple code with the help of the above. when i do it in fiddle it shows only the colored bars and when I am trying it in Sublime Text editor then it is showing text ONLY without any colored bars. here is the link to my code
https://jsfiddle.net/recklesswish/aw330go1/
#import url("https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css")
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
div#header {
width: 100%;
height: 50px;
background-color: #FF0000;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
margin;left:15px;
}
.logo a {
font-size: 1.6em;
color: #fff;
}
.logo a span {
font-weight: 300;
}
div#container {
width:100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #010101;
float: left;
}
<div id="header">
<div class="logo">
Xero<span>Source</span>
</div>
</div>
<div id="container">
<div class="sidebar">
klskdn
</div>
<div class="content"></div>
</div>
As stated above, you need to fix
<linl rel="stylesheet" type="text/css" href="styles/global.css" />
to
<link rel="stylesheet" type="text/css" href="styles/global.css" />
and fix your CSS markup in regards to
.logo {
float: left;
margin-top: 50px;
margin;left:15px;
}
to
.logo {
float: left;
margin-top: 50px;
margin-left:15px;
}
Next, the reason why you are not seeing any text and just a color bar for .sidebar is because the text is black. You need to add in the color property for that class or move it using margin.
.sidebar {
width: 250px;
height: 100%;
background-color: #010101;
float: left;
color:#fff; /* change to whatever you want */
}
As a first point you have an error:
.logo {
float: left;
margin-top: 50px;
margin;left:15px;
}
should be
.logo {
float: left;
margin-top: 50px;
margin-left:15px;
}
You're ending your line too early with the ; typo and likely messing up the rest of your document. jsFiddle is probably overlooking this error. Try changing it and loading it locally and seeing if it fixes it.
First you need to make sure the HTML links to your CSS, current spelling mistake on 'linl rel' needs to be 'link rel'
Second you need to change the colour of the text on the .logo a class in global.css, change to #000; and you will see the text, it is also worth adding a p tag around the random text in the container div and add a p tag to the css changing the color to white (#fff;) and you will get that text to display.
<head>
<style>
#import url("https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css")
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
color:green;
}
a {
text-decoration: none;
}
div#header {
width: 100%;
height: 50px;
background-color: #FF0000;
margin: 0 auto;
}
.logo a {
font-size: 1.6em;
color: blue;
}
.logo a span {
font-weight: 300;
}
div#container {
width:100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #010101;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
Xero<span>Source</span>
</div>
</div>
<div id="container">
<div class="sidebar">
klskdn
</div>
<div class="content"></div>
</div>
</body>
try this in local
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.