Exploring CSS Images, Graphics, and Typography in the Laravel 4 Framework

I am encountering some difficulties with setting up my assets in the Laravel 4 Framework. To provide some context, I have an assets folder within my public directory, containing subfolders for css, images, and fonts. Here are the paths:

/laravel-master/public/assets/CSS

/laravel-master/public/assets/images

/laravel-master/public/assets/webfonts

Within the CSS folder, I have my main CSS file, style.css. I am attempting to utilize an image as a background within this CSS file. Here is the code snippet:

.banner-image{
    background: transparent url('../assets/images/8662834823_575a23516d_o.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 800px;
    min-width: 1200px;
}

I have also experimented with:

.banner-image {
background: url('assets/images/8662834823_575a23516d_o.jpg');
}

and: 

.banner-image {
background: url('/assets/images/8662834823_575a23516d_o.jpg');
}

When I include this CSS in my view using the div tag: 

<div class="banner-image"></div>

Both implementations result in a blank page. The image fails to appear, and I am uncertain of the cause.

Next, I am attempting to display a simple image without CSS. I have tried: 

<img src="{{asset('assets/images/fanssignupsplash.png')}}">

and:

{{HTML::image('images/fanssignupsplash.png')}}

and: 

{{HTML::image('assets/images/fanssignupsplash.png')}}

All of these attempts result in a broken image icon. The image does not display.

Lastly, back to CSS, I am endeavoring to utilize font files from the webfonts folder mentioned earlier. However, the font does not seem to be applied. While the CSS file loads correctly and changes text color, the font remains unchanged. Here is the relevant CSS:

@font-face {

  font-family:'proxima-nova';
  src:url('/assets/webfonts/proximanova-bold-webfont.eot');
  src:url('/assets/webfonts/proximanova-bold-webfont.eot?#iefix') format("embedded-opentype"),url('/assets/webfonts/proximanova-bold-webfont.woff') format("woff"),url('/assets/webfonts/proximanova-bold-webfont.ttf') format("truetype"),url('/assets/webfonts/proximanova-bold-webfont.svg#ProximaNovaBold') format("svg");
  font-weight:bold;
  font-style:normal

  }

The view being used is a blade file (landing.blade.php). These actions are taking place on localhost utilizing MAMP.

Thank you for your assistance with these issues. As a newcomer to Laravel, I have successfully implemented similar functionalities outside of a framework on a live website. I genuinely appreciate your support.

csslaravellaravel-4

Answer №1

After looking at your initial question and attempted solution, I came to a realization.

Wouldn't it make more sense to have this instead :

.banner-image{
    background: transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
    ...
}

Take note of the removed "/assets"

This is assuming your file structure looks like this:

  • assets
    • CSS
      • style.css
    • images
      • 8662834823_575a23516d_o.jpg

Regarding your second question, consider adding a / at the beginning of your URL :

{{HTML::image('/assets/images/fanssignupsplash.png')}}

This is assuming that assets is located at the root of your server.

Answer №2

To include a custom font in main.blade.php:

  <style>
    <?php $url = asset('plugins/font/Roboto-Regular.tff') ?>
    @font-face {
        font-family: Roboto;
        src: {{$url}};
    }
  </style>

You can also use:

  <style>
    @font-face {
        font-family: Roboto;
        src: {{asset('plugins/font/Roboto-Regular.tff')}};
    }
  </style>

Then, in your scss or css file:

body{
  font-family: Roboto;
}

https://laravel.com/docs/4.2/helpers#urls

By following this method, you will avoid issues when publishing your app

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differences between Animation Easing in iOS and CSS3 Cubic Bezier Functions

I am currently working on an iOS app and I am trying to improve the animations within it. Having a lot of experience with CSS3 animation and transitions, I want to be able to define my animations in iOS with the same precision that is possible with CSS3 ( ...

ioscsscore-animationcss-transitionsbezier

The alignment of the textarea is off due to an issue with the md

I'm experiencing an issue with the alignment of options in my form. The md-maxlength attribute is causing one line to be higher than the rest, as shown in the image below. https://i.sstatic.net/3J3Ts.png My goal is to move that specific textarea one ...

htmlcssangularjs

The alignment of vertical text can impact the positioning of surrounding text

I am working on creating an online portfolio using HTML and CSS, but I am facing a challenge with vertical alignment. My goal is to have a line of vertical text running down the left side of the screen that displays "My occupation". On the right side of t ...

htmlcssvertical-alignmentvertical-text

Unique style sheet for unique content block

Recently I made some custom modifications to a block by adding style attributes directly into the .phtml file between tags. Now, I am looking to create a separate file for my block so that it can use a custom .css file. Where should I place this new file? ...

cssfrontendblock

Attempting to achieve the effect where the entire row of a table changes color when the mouse hovers

I'm attempting to create a gradient effect for an entire row in a table when the mouse hovers over any cell within that row. Despite using what I believe is the correct CSS code, nothing changes upon mouseover (even though the original gradient appear ...

csshover

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

<img class="cl" src="photo/198.jpg"/></br> <audio class="cs" controls> <source src="audio/198 banu nagamothu.mp3" type="audio/mpeg"> </audio> I prefer not to have audio controls initially, but when the image i ...

javascripthtmlcss

Encountering a node error when attempting to execute npm in conjunction with Laravel Breeze

Whenever I run npm run dev or npm run watch, I encounter this error and I'm unable to resolve it. This issue is occurring in a brand new Laravel 8 application. It seems to be happening when using the development command. ERROR in ./resources/css/app. ...

node.jslaravelnpmwebpack

I am unable to utilize folder paths in CSS within my React application

Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance? This code snippet will work: const style={ width:'300px', ...

cssreactjsbackground-imagecss-loader

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

Remove the float from the final list item in order to resolve display issues in Internet Explorer

I am trying to create a menu with the following HTML structure: <ul> <li id="btnHome"><a href="#">Link One</a></li> <li id="btnAbout"><a href="#">Link Two</a></li> <li id="btnContact"> ...

htmlcssinternet-explorer

Use Jquery to locate and modify any occurrences of the div text through find and replace

Here is a screenshot I captured. https://i.stack.imgur.com/VUGEg.png This content resides inside my div. My goal is to replace "" with "-" and "" with "-" wherever they occur within the div, and then send this modified content via ajax using jQuery since ...

jqueryhtmlcssajax

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

htmlcsslayoutresponsive-designtwitter-bootstrap-3

Navigate through the overlay's content by scrolling

Objective: Looking to implement a scroll feature for long content. Issue: Not sure how to create a scroll that allows users to navigate through lengthy content. Thank you! function openNav() { document.getElementById("myNav").style.height = "1 ...

javascriptjqueryhtmlcss

What is the best way to adjust the location of the date picker or calendar icon in an HTML and CSS setup, without relying on

Currently, I am using a date picker with the calendar icon placed on the right side of the input field by default. However, I would like to move the calendar icon to the beginning of the input field. Despite my efforts to change it, I have not been success ...

htmlcss

Utilizing TCPDF with FPDI in Laravel: A Comprehensive Guide

I am currently utilizing FPDI for the purpose of generating PDFs from a template.pdf file within a Laravel 5 project. However, I have encountered difficulties with UTF-8 names as FDPI does not inherently support encoding. After extensive research, it seem ...

phplaravelfpdffpdi

Is the dropping of the middle section in the inline list imminent?

After creating a fiddle to check for conflicts with other styles on my page, I ran into an issue with an inline list. There seems to be a slight drop in the middle item's positioning that I can't figure out. Despite trying various margin adjustme ...

htmlcsshtml-lists

The importance of CSS z-index in optimizing for mobile responsiveness

In my jquery modal dialog box, I wanted to create a shadow effect only between the dialog box and the screen. To achieve this, I added an overlay using a <div>: <div id="overlay" class="overlay btn-hidden"></div> <d ...

cssoverlay

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

javascripthtmlcssangularjsangular-ui-grid

What is the best way to have my sliding panel automatically close when I click outside of it?

I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...

javascriptjquerycssresponsive-designpanel

Laravel's Eloquent updateOrCreate function takes too long to execute during updates

My issue arises when attempting to update my entity, as it successfully updates but seems to get caught in a loop, failing to exit. Even before the 60-second execution time expires, the changes I made are reflected in the database. Strangely, upon constant ...

phplaravelvue.jseloquent