I followed this tutorial:
https://www.youtube.com/watch?v=on7p8oqfv80
I cannot seem to add background image to a class. This image link does work, I have opened in browser and I have also previously added it using "img src=", directly into the html. It works.
I know the stylesheet is being linked properly, because the style of the text changes.
I have tried adding a width, using single quotes instead of double quotes, tried using background-image instead of background. I have tried using a local image and yes I am on Linux and yes I have chmod 777 on all files in that directory, just to be sure. I have tried all of the different solutions offered across these following links:
Cannot add background image to my <div>
How to add background image in css?
Cannot add background image to my <div>
Tried this on Firefox, Chrome and IE across Linux, Windows and Mac.
Here is the code
var errorCallback = function(e) {
console.log('Reeeeejected!', e);
};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia(
{
audio: true,
video: true
},
function(stream)
{
video.src = window.URL.createObjectURL(stream)
},
errorCallback);
} else {
video.src = 'somevideo.webm';
}
* {
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
}
/*---Start Parallex---*/
.parallax {
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
*/ background-size: 100% 100%;
width: auto;
}
.parallax-inner {
padding-top: 50%;
padding-bottom: 50%;
}
<h1> Space </h1>
<section class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
It's a typo issues like in your style sheet you are designing parallax but when you added the class to the section you added parallex correct your style sheet and it will work:
*{
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
.parallex {
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: auto;
}
.parallex-inner {
padding-top: 50%;
padding-bottom: 50%;
}
*{
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
/*---Start Parallex---*/
.parallex{
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: 100%;
}
.parallax-inner{
padding-top: 50%;
padding-bottom: 50%;
}
<body>
<h1> Space </h1>
<section class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
</body>
I fond some spelling errors and syntax errors.
Hope this will help you abit on the way!
I tried your code using a local image file and found that the background image display but when it is passed directly(either to section or div)
<section style="background-image: url('049.JPG');" class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
I have to add that using the correct classes as suggested here already and removing */(surely a bug) after your background-image declaration returned me no positive result...apart from when I tried directly
Related
I am trying to make a full width hero image with an h1 header, boxed text with 2 sizes of text inside plus a button. I have been wrestling with this all day and it just doesnt seem to work the way i'd like it to. Any help would be really appreciated.
thanks
Images:
How it looks at the moment with code
If you notice it is not going full width (gap on the left).
This is how i would like it to look or close enough
//css//
.hero-image {
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
}
</style>
//html//
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class="herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>
Updated image:
Updated image
.hero-image {
background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
text-align:right;
}
.hero-text h1 {
font-size:40px;
margin-right:15%;
}
.hero-text h1 .italic {
font-style: italic;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
max-width: 150px;
margin-top: 25px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
position:relative;
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
margin: 0 0 0 auto;
text-align:left;
}
.herotext2 .no {
font-size: 135px;
line-height: 130px;
font-weight: 600;
}
.herotext2 .tag {
position: absolute;
bottom: 26px;
right: 30px;
font-size: 12px;
color: red;
}
<div class="hero-image">
<div class="hero-text">
<h1>IT support for your<br> business - <span class="italic">as easy as<br>child’s play</span></h1>
<p class="herotext2">All inclusive IT GDPR service packages from <span class="no">£33</span><span class="tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>
https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/
I have updated your html format and added new styles..Now it appears as your design but you need to apply relevant font family.
It works nice. Let me know if there is any issue.
Thanks.
You are missing absolute positioning the elements inside the hero image. This way, you can force them to stay at certain point inside it, by setting top, right, bottom and left of each one.
Don't forget to set parent hero div to position: relative.
I am making an accordion menu whereby I am adding a PDF inside an object element. However I just cannot get the object to show 100% of its height, therefore it makes it difficult to use.
All I would like is to know how to make the PDF file inside of the object div to show it's full height. I remember having similar issues with footers..
Thanks.
if( jQuery(".toggle .toggle-title").hasClass('active') ){
jQuery(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
}
jQuery(".toggle .toggle-title").click(function(){
if( jQuery(this).hasClass('active') ){
jQuery(this).removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(200);
} else {
jQuery(this).addClass("active").closest('.toggle').find('.toggle-inner').slideDown(200);
}
});
body {
color: #4B4B4B;
font-family: ARIMO;
}
body a {
cursor: pointer;
color: #4B4B4B;
text-decoration: none;
}
body section {
margin-bottom: 90px;
}
body section h1 {
text-transform: uppercase;
text-align: center;
font-weight: normal;
letter-spacing: 10px;
font-size: 25px;
line-height: 1.5;
}
object{
width: 100%;
height: 100%;
display: block;
position: relative;
min-height: 100%;
}
/* Styles for Accordion */
.toggle{
background: #eee;
border-top: solid 1px #3b7c8e;
margin-bottom: 50px;
width: 80%;
height: 100%;
}
.toggle .toggle-title {
position: relative;
display: block;
margin-bottom: 6px;
}
.toggle .toggle-title h3 {
font-size: 20px;
margin: 0px;
line-height: 1;
cursor: pointer;
font-weight: 200;
}
.toggle .toggle-inner {
padding: 7px 25px 10px 25px;
display: none;
margin: -7px 0 6px;
max-width: 100%;
max-height: 100%;
min-height: 100%;
}
.toggle .toggle-inner div {
max-width: 100%;
max-height: 100%;
min-height: 100%;
}
.toggle .toggle-title{
display: block;
padding: 25px 25px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
<div class="toggle-title">
<h3>
<div class="title-name">Example title</div>
</h3>
<p>Example call for paper</p>
<p>Astronomers face an embarrassing conundrum: they don't know what 95% of the universe is made of. Atoms, which form everything we see around us, only account for a measly 5%. Over the past 80 years it has become clear that the substantial remainder is comprised of two shadowy entities – dark matter and dark energy. The former, first discovered in 1933, acts as an invisible glue, binding galaxies and galaxy clusters together. Unveiled in 1998, the latter is pushing the universe's expansion to ever greater speeds. Astronomers are closing.</p>
</div>
<div class="toggle-inner">
<object height="100" data="http://prototypes.infopro-insight.com/test/MW/call_for_papers.pdf"></object>
</div>
</div><!-- END OF TOGGLE -->
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
This question already has answers here:
Why isn't z-index working here
(3 answers)
Closed 8 years ago.
So I've got a div that I want to appear in front of every other div on the page. Here's all my code:
<!DOCTYPE html>
<html>
<head>
<title>Koowalk Game Development - Home</title>
<link rel="stylesheet" href="koowalk.css"/>
</head>
<body>
<h4 id="header">KOOWALK</h4>
<h4 id="headerb">GAMES</h4>
<p>Hello. We're Koowalk Games. We make games.</p>
<div id="work">
<p id="workheader">Games</p>
<div id="workbar"></div>
<script type="text/javascript">
var bar = document.getElementById("workbar");
var x = 0;
window.onload = change;
function change() {
requestAnimationFrame(color);
}
function color() {
bar.style.background = "hsl(" + x + ", 100%, 50%)";
if (x < 358) {
x++;
requestAnimationFrame(color);
}
else {
x = 0;
requestAnimationFrame(color);
}
}
</script>
<div class="workleft">
<p class="headerleft">Some Game</p>
<p class="pleft">This will be some kind of description of the game. There will also be a picture to the left. Cause I know how much you love pictures. I'm in bio. Dransfield is about to yell at me. Except he isn't. Why am I writing this, you might ask? Just think appearences. It's all about the appearences.</p>
</div>
<div id="sliding1"></div>
</div>
</body>
</html>
And the CSS:
#font-face {font-family: "Veger"; src: url('Fonts/Veger(light).ttf'); }
#font-face {font-family: "Kloe"; src: url('Fonts/ff4a_kloe_thin-web.ttf'); }
::selection {
background-color: #e2e2e2;
color: white;
}
::-moz-selection {
background-color: hsl(0, 0%, 89%);
color: white;
}
body {
background: #5a5a5a;
font-family: Veger;
color: white;
text-align: center;
}
#header {
font-size: 100px;
color: #49ffdc;
}
#headerb {
font-size: 100px;
margin-top: -145px;
color: #ffff63;
}
p {
font-family: Kloe, sans;
font-size: 40px;
margin-left: 15%;
margin-right: 15%;
margin-top: -40px;
}
#work {
position: absolute;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
width: 100%;
height: 500px;
background: #ff4545;
margin-top: 100px;
}
#workheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}
#workbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}
.workleft {
float: left;
width: 40%;
margin-left: 3%;
margin-top: -20px;
height: 300px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans;
text-align: right;
}
.headerleft {
margin-right: 5%;
font-size: 50px;
margin-top: -5px;
}
.pleft {
margin-right: 5%;
margin-left: 50%;
font-size: 15px;
}
#sliding1 { //This is the div that needs to appear in front of everything
z-index: 2;
width: 47%;
height: 10px;
color: #06168d;
}
As you can see, #sliding1 is the div I need to get in front of everything else. I've never used z-index before. The div is showing up, but it's behind everything. How do you use z-index exactly?
EDIT: This is not duplicate. I looked at most of the other questions, and all the answers that were provided didn't work. I now have position: absolute and it is still not working.
In order to use z-index you have to add position to the element.
#sliding1 {
z-index: 2;
position: relative;
}
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).
Reference: css-tricks
I'm trying to achieve the following page divider:
But, I'm ending up with this:
Obviously the yellow is just to tell me where the tops and bottom are (should be white), and I seem to be getting this unwanted top and bottom margin. I've tried a few methods including display:inline-block, display:inline, margin-top:-2px but lost what I've tried and what I haven't. The span was originally a div but this was one of the many things I changed trying.
This is my last attempt:
<style>
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding: 0 15px;
background: yellow;
font-size: 16px;
color: #333;
}
</style>
<div class="pageDivider"><span class="inner">SHARE</span></div>
Any clues on how to do this the proper way?
I cannot delete my question, so I will share the solution I have just found which works really, really nicely - I hope it helps others.
JSFIDDLE DEMO
h6.pageDivider {
font-family: 'Lato', 'Open Sans', sans-serif;
overflow: hidden;
text-align: center;
margin: 40px 0;
font-weight: 700;
color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
background-color: #E9E9E9;
content: "";
display: inline-block;
height: 18px;
position: relative;
vertical-align: middle;
width: 50%;
}
h6.pageDivider:before {
right: 30px;
margin-left: -50%;
}
h6.pageDivider:after {
left: 30px;
margin-right: -50%;
}
<h6 class="pageDivider">HELLO WORLD</h6>
your answer is ....
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding:2.5px 20px !important;
background: yellow;
font-size: 16px;
color: #333;
}
<div class="pageDivider"><span class="inner">SHARE</span></div>