Should I be able to use EL in css to access an img in the resources folder of a jsf 2 app? It does not seems to be working. In my css I've below:
.sectionDivider {
background-image: "#{resource['default:img/dashes.png']}";
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
When I access the page thru the browser, the background-image is not showing. When I view the CSS using browser Developer tools, the CSS looks like below (The background-image is missing):
.sectionDivider {
WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: center 50%; HEIGHT: 1px; OVERFLOW: hidden
}
I found the problem. I forgot to put url() in the background-image style. I changed to do below and it is working now:
.sectionDivider {
background-image: url('#{resource['default:img/dashes.png']}');
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
Related
I've searched everywhere for a solution to this but can't seem to solve it. The main background image here zooms in massively on iPhone. This is my background image code:
.home-featured {
background-image: url(/Roombg2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-color: #bbbbbb;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm not sure if other CSS for home-featured is causing any problems:
.home-featured .wrap {
margin-top: -160px;
max-width: 782px;
display: table;
text-align: center;
}
.home-featured .home-widgets-1 {
display: inline-block;
display: table-cell;
vertical-align: middle;
width: 100%;
padding: 200px 0;
font-size: 20px;
}
Any help would be hugely appreciated - I'm completely lost on this!
Probably you need to configure the meta viewport tag. In the iphone the viewport behaves a little different.
Check this: Configuring the viewport
My website http://basement-recordings.com/ is built on a free quill theme on wordpress (4.3.2).
I have a problem on all iphones on both chrome and safari: the main menu seems to work fine the first time I click the "hamburger", but the second time I click it everything is completely wrong.
Can anyone please help me figure this out? I have tried everything but it does not seem to work.
You have a floated li tags here
.main-navigation li {
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
text-align: center;
height: 150px;
width: 150px;
line-height: 150px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
margin-left: 1%;
float: left;
}
so in your media queries you have to clear it from here using float:none
#media only screen and (max-device-width: 349px) and (max-width: 349px) and (min-device-width: 100px) and (orientation: portrait)
.main-navigation li {
height: 29vw;
width: 29vw;
line-height: 29vw;
-webkit-border-radius: 14.5vw;
-moz-border-radius: 14.5vw;
border-radius: 14.5vw;
margin-left: 2.2vw;
padding: 0;
margin-bottom: 2.2vw;
display: block;
float: none;
}
and make sure the other media quires have the same fix, now I have this result.
I solved it.
For some reason, the container's width of 100% only worked the first time I clicked on the menu.
Changing 100% to 100vw seems to have solved the problem.
Trying to get a logo onto a website. Eventually use it as a link to the main page. But it wont even show up when I use css. It does link when I use HTML So i know its not the image. CSS is in its own folder, and Image is in its own folder. So I dont think i have the url incorrect.
CSS
.logo {
background-image: url(../images/logo.png);
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
width: 1000px;
height: 100px;
}
HTML
<body>
<div class="logo">
</div>
</body>
Feel like Ive tried everything.
HERE IS THE ANSWER
css
.logo {
background: url(../images/logo.png) ;
background-size: 200px 200px;
width: 200px;
height:200px;
}
Try changing background-image to background and adding quotation marks.
.logo{
background: url('../images/logo.png');
I've the following style in a css file:
.sectionDivider {
background-image: url('#{resource['default:../img/dashes.png']}');
background-position:center; width:100%;
background-repeat: repeat-x; height: 1px; overflow: hidden;
}
When running my app, I'm getting this EL expression error:
Cannot evaluate EL expression resource['default:../img/dashes.png'] in resource default:css/it.css
Can't spot what I did that is wrong.
I've a CSS question. I'm using Rails 3.0 and trying to design a site of mine. I found this anoying problem previously also but now is the time to find a solution.
The situation: I set up a CSS like this:
* {margin: 0;padding: 0;}
body {background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
a {color: blue; outline: none; text-decoration: underline;}
a:hover {text-decoration: none;}
p {margin: 0 0 18px}
img {border: none;}
input {vertical-align: middle;}
#wrapper {width: 955px; margin: 0 auto;}
/* Header
-----------------------------------------------------------------------------*/
#header {background: transparent url(../images/header.jpg) no-repeat; height: 413px;}
#navigation {background: transparent url(../images/menu_bg.jpg) no-repeat; height:36px;}
/* Middle
-----------------------------------------------------------------------------*/
#middle {width: 100%; height: 1%; position: relative;}
#middle:after {content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
#container {background: transparent url(../images/main_bg.jpg) no-repeat; width: 100%; float: left; overflow: hidden;}
#content {padding: 0 270px 0 0;}
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {float: left; margin-right: -3px; width: 313px; margin-left: -313px; position: relative;}
/* Footer
-----------------------------------------------------------------------------*/
#footer {background: transparent url(../images/footer.jpg) no-repeat; height: 63px;}
/*Content
-----------------------------------------------------------------------------*/
#prediction_box {width:290px; height:200px; position:relative; background-color:#392b3f; border: 1px solid #000; margin: 25px 25px 40px 40px;}
When I start to write something on my index page, this wont be 12px Arial as I set in the body tag. The wierness starts if I wan't to have the text in white.
body {font-color:#fff; background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
If I use the font-color:#fff; than nothing happens. However if I use font: #fff 12px/18px etc... than suddenly the texts will be Arial 12px but still in black!
Can you explain how is this possible?
Looking forward your answears,
Kael
CSS does not define a font-color property. You'll need to use the color property as so: color: #fff; in order for the foreground colour (font colour) to become white.